1
Я играю с блестящим scrollMagic Яна Папека и, похоже, не получается получить код TimelineMax. Когда вы просматриваете страницу, пронумерованные круги должны последовательно исчезать на 50%. Из моего кода похоже, что он должен работать, но это не так. Что я делаю не так?jQuery ScrollMagic Timeline Max не работает
Here's a plunker of my experiment
Я работаю с Petr Tichy's demo и a scrollMagic example
Вот в ЯШ:
(function($) {
var wh = window.innerHeight,
$m = $('.m'),
$c1 = $('.c1'),
$c2 = $('.c2'),
$c3 = $('.c3'),
$c4 = $('.c4');
// init
var ctrl = new ScrollMagic.Controller();
// build scene
var circles = new TimelineMax();
circles
.to($c2, 1.5, {alpha: 0.5, ease: Cubic.easeOut})
.to($c4, 1.5, {alpha: 0.5, delay:0.25})
.to($c1, 1.5, {alpha: 0.5, delay:0.25})
.to($c3, 1.5, {alpha: 0.5, delay:0.25});
new ScrollMagic.Scene({
triggerElement: $('.container2')[0],
duration: '100', offset: -50
})
.setTween(circles)
.addIndicators({name: "circlesIndicator"})
.addTo(ctrl);
})(jQuery);
Вот CSS:
.container1{height:550px;width: 600px;position:relative;}
.container2{height:2000px;width: 600px;position:relative; }
.m{top:250px;left: 250px;width:150px;height:150px;position:absolute;}
.c1{top:400px;left: 100px;width:100px;height:100px;position:absolute;}
.c2{top:150px;left: 100px;width:100px;height:100px;position:absolute;}
.c3{top:400px;left: 450px;width:100px;height:100px;position:absolute;}
.c4{top:150px;left: 450px;width:100px;height:100px;position:absolute;}
Вот HTML:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container1"><h1>Hola Plunkerz!</h1>
<p>This is an animation test that begins when content scrolls into the viewport.
Therefore, please scroll down to see test, thanks!</p></div>
<div class="container2">
<div class="c1"><img src="http://i.imgur.com/y7HdEfn.png"></div>
<div class="c2"><img src="http://i.imgur.com/s4A18qr.png"></div>
<div class="m"><img src="http://i.imgur.com/kBaLqYH.png"></div>
<div class="c3"><img src="http://i.imgur.com/NF5tdJN.png"></div>
<div class="c4"><img src="http://i.imgur.com/M4xBAUS.png"></div>
</div>
</body>