0
鏈接到想要的行爲(上滾動滑板):http://scrollmagic.io/examples/advanced/section_slides_manual.html無法獲得Scrollmagic插件工作爲例
我複製從該網站的來源,但我有麻煩往復它的行爲。我知道有一些CSS正在從源代碼移動,但它似乎更多的是一個JavaScript問題,我無法弄清楚。
小提琴鏈接:https://jsfiddle.net/zcgxxj44/
\t $(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: "onLeave",
\t \t \t \t duration: "500%"
\t \t \t })
\t \t \t .setPin("#pinContainer")
\t \t \t .setTween(wipeAnimation)
.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
\t \t \t .addTo(controller);
\t });
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
position:relative;
}
#pinContainer {
\t \t width: 100%;
\t \t height: 100%;
\t \t overflow: hidden;
\t }
\t #slideContainer {
\t \t width: 400%; /* to contain 4 panels, each with 100% of window width */
\t \t height: 500px;
background:red;
\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;
background:blue;
\t }
.hola{
background:green;
height:120vw;
width:100vw;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/jquery.gsap.min.js"></script>
<div class="hola"></div>
<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>
我覺得你在這裏缺少一些腳本。 –