0
Я хочу иметь панель полного экрана (ширина/высота) для анимации по горизонтали (параллакс), когда пользователь прокручивает по вертикали. Я пытаюсь использовать пример основного слайда раздела, но не могу заставить его работать. У меня здесь есть скрипка. https://jsfiddle.net/69dz7tav/Горизонтальная анимация при вертикальной прокрутке с магией прокрутки
$(function() { // wait for document ready
\t \t // init
\t \t var controller = new ScrollMagic.Controller();
\t \t // define movement of panels
\t \t var wipeAnimation = new TimelineMax()
\t \t \t // animate to second panel
\t \t \t .to("#slideContainer", 0.5, {z: -150}) \t \t // move back in 3D space
\t \t \t .to("#slideContainer", 1, {x: "-25%"}) \t // move in to first panel
\t \t \t .to("#slideContainer", 0.5, {z: 0}) \t \t \t \t // move back to origin in 3D space
\t \t \t // animate to third panel
\t \t \t .to("#slideContainer", 0.5, {z: -150, delay: 1})
\t \t \t .to("#slideContainer", 1, {x: "-50%"})
\t \t \t .to("#slideContainer", 0.5, {z: 0})
\t \t \t // animate to forth panel
\t \t \t .to("#slideContainer", 0.5, {z: -150, delay: 1})
\t \t \t .to("#slideContainer", 1, {x: "-75%"})
\t \t \t .to("#slideContainer", 0.5, {z: 0});
\t \t // create scene to pin and link animation
\t \t new ScrollMagic.Scene({
\t \t \t \t triggerElement: "#pinContainer",
\t \t \t \t triggerHook: 0,
\t \t \t \t duration: "500%"
\t \t \t })
\t \t \t .setPin("#pinContainer")
\t \t \t .setTween(wipeAnimation)
\t \t \t .addTo(controller);
\t });html,body {
width:100%;
height:100%;
}
#pinContainer {
\t \t width: 100%;
\t \t height: 100%;
\t \t overflow: hidden;
\t \t -webkit-perspective: 1000;
\t \t perspective: 1000;
\t }
\t #slideContainer {
\t \t width: 400%; /* to contain 4 panels, each with 100% of window width */
\t \t height: 100%;
\t }
\t .panel {
\t \t height: 100%;
\t \t width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
\t \t float: left;
\t }
.blue {
\t background-color: #3883d8;
}
.turqoise {
\t background-color: #38ced7;
}
.brown {
\t background-color: #a66f28;
}
.bordeaux {
\t background-color: #953543;
}<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pinContainer">
\t <div id="slideContainer">
\t \t <section class="panel blue">
\t \t \t <b>ONE</b>
\t \t </section>
\t \t <section class="panel turqoise">
\t \t \t <b>TWO</b>
\t \t </section>
\t \t <section class="panel green">
\t \t \t <b>THREE</b>
\t \t </section>
\t \t <section class="panel bordeaux">
\t \t \t <b>FOUR</b>
\t \t </section>
\t </div>
</div>Он проходит через анимацию временной шкалы сразу, а не на свитке. Что мне не хватает?