がScrollmagicプラグインは一例として、望ましい動作に

Question

リンク（スクロール上のスライド）動作させることはできません：http://scrollmagic.io/examples/advanced/section_slides_manual.html

を私はサイトからソースをコピーしたが、トラブル、それは行動だ往復を持っています。私はソースから移動しているいくつかの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>

Answer 1

は同じの実施例です。

$(function() { // wait for document ready 
 
    // init 
 
    var controller = new ScrollMagic.Controller(); 
 

 
    // define movement of panels 
 
    var wipeAnimation = new TimelineMax() 
 
    // animate to second panel 
 
    .to("#slideContainer", 0.5, { 
 
     z: -150 
 
    }) // move back in 3D space 
 
    .to("#slideContainer", 1, { 
 
     x: "-25%" 
 
    }) // move in to first panel 
 
    .to("#slideContainer", 0.5, { 
 
     z: 0 
 
    }) // move back to origin in 3D space 
 
    // animate to third panel 
 
    .to("#slideContainer", 0.5, { 
 
     z: -150, 
 
     delay: 1 
 
    }) 
 
    .to("#slideContainer", 1, { 
 
     x: "-50%" 
 
    }) 
 
    .to("#slideContainer", 0.5, { 
 
     z: 0 
 
    }) 
 
    // animate to forth panel 
 
    .to("#slideContainer", 0.5, { 
 
     z: -150, 
 
     delay: 1 
 
    }) 
 
    .to("#slideContainer", 1, { 
 
     x: "-75%" 
 
    }) 
 
    .to("#slideContainer", 0.5, { 
 
     z: 0 
 
    }); 
 

 
    // create scene to pin and link animation 
 
    new ScrollMagic.Scene({ 
 
     triggerElement: "#pinContainer", 
 
     triggerHook: "onLeave", 
 
     duration: "500%" 
 
    }) 
 
    .setPin("#pinContainer") 
 
    .setTween(wipeAnimation) 
 
    .addIndicators() // add indicators (requires plugin) 
 
    .addTo(controller); 
 
});

<link href="http://scrollmagic.io/css/examples.css" rel="stylesheet" /> 
 
<link href="http://scrollmagic.io/css/style.css" rel="stylesheet" /> 
 
<link href="http://scrollmagic.io/css/normalize.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="http://scrollmagic.io/js/examples.js"></script> 
 
<script src="http://scrollmagic.io/js/lib/modernizr.custom.min.js"></script> 
 
<script src="http://scrollmagic.io/js/lib/highlight.pack.js"></script> 
 
<script src="http://scrollmagic.io/js/examples.js"></script> 
 
<script src="http://scrollmagic.io/js/lib/greensock/TweenMax.min.js"></script> 
 
<script src="http://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script> 
 
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> 
 
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> 
 

 
<div id="content-wrapper"> 
 
    <div id="example-wrapper"> 
 
    <div class="scrollContent"> 
 

 
     <section class="demo" id="section-slides"> 
 
     <style type="text/css"> 
 
      #pinContainer { 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: hidden; 
 
      -webkit-perspective: 1000; 
 
      perspective: 1000; 
 
      } 
 
      
 
      #slideContainer { 
 
      width: 400%; 
 
      /* to contain 4 panels, each with 100% of window width */ 
 
      height: 100%; 
 
      } 
 
      
 
      .panel { 
 
      height: 100%; 
 
      width: 25%; 
 
      /* relative to parent -> 25% of 400% = 100% of window width */ 
 
      float: left; 
 
      } 
 
     </style> 
 
     <div id="pinContainer"> 
 
      <div id="slideContainer"> 
 
      <section class="panel blue"> 
 
       <b>ONE</b> 
 
      </section> 
 
      <section class="panel turqoise"> 
 
       <b>TWO</b> 
 
      </section> 
 
      <section class="panel green"> 
 
       <b>THREE</b> 
 
      </section> 
 
      <section class="panel bordeaux"> 
 
       <b>FOUR</b> 
 
      </section> 
 
      </div> 
 
     </div> 
 

 
     </section> 
 
    </div> 
 
    </div> 
 
</div>