|
Прелоадер не выполняет свою задачу!
Прелоадер срабатывает не сразу, перед ним успевает прогрузиться часть содержимого страницы.
Начало html файла:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
Js библиотеки для прелоадера:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/plugins/CSSRulePlugin.min.js"></script>
<script type='text/javascript' src='script.js'></script> -здесь скрипт прелоадера
сам скрипт прелоадера:
$(window).on('load', function(e) {
e.preventDefault();
transition();
});
function transition() {
var tl = new TimelineMax();
tl.to(CSSRulePlugin.getRule('body:before'), 0.2, {cssRule: {top: '50%' }, ease: Power2.easeOut}, 'close')
.to(CSSRulePlugin.getRule('body:after'), 0.2, {cssRule: {bottom: '50%' }, ease: Power2.easeOut}, 'close')
.to($('.loader'), 0.2, {opacity: 1})
.to(CSSRulePlugin.getRule('body:before'), 0.2, {cssRule: {top: '0%' }, ease: Power2.easeOut}, '+=1.5', 'open')
.to(CSSRulePlugin.getRule('body:after'), 0.2, {cssRule: {bottom: '0%' }, ease: Power2.easeOut}, '-=0.2', 'open')
.to($('.loader'), 0.2, {opacity: 0}, '-=0.2');
}
|