リンク(スクロール上のスライド)動作させることはできません: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>
私はあなたがここにいくつかのスクリプトが欠落していると思います。 –