ScrollMagic - アンカーリンク付きTimelineMaxページ上の視差スクロール

Question

視差スクロール効果のScrollMagicプラグインを使用しています。以下は私のコード

HTMLコード

<div style="position:fixed;right:50px;top:50px;width:200px;height:300px;background:#fff;z-index:1"> 
<div><a href="#one">ONE</a></div> 
<div><a href="#two">TWO</a></div> 
<div><a href="#three">THREE</a></div> 
<div><a href="#four">FOUR</a></div> 
</div> 
<div id="pinContainer"> 
<div id="slideContainer"> 
<section class="panel blue"> 
<a id="one"></a> 
<b>ONE</b> 
</section> 
<section class="panel turqoise"> 
<a id="two"></a> 
<b>TWO</b> 
</section> 
<section class="panel green"> 
<a id="three"></a> 
<b>THREE</b> 
</section> 
<section class="panel bordeaux"> 
<a id="four"></a> 
<b>FOUR</b> 
</section> 
</div> 
</div> 

JavaScriptコードは

$(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); 

    // change behaviour of controller to animate scroll instead of jump 
controller.scrollTo(function (newpos) { 
    TweenMax.to(window, 0.5, {scrollTo: {y: newpos}}); 
}); 

// bind scroll to anchor links 
$(document).on("click", "a[href^='#']", function (e) { 
    var id = $(this).attr("href"); 
    if ($(id).length > 0) { 
     e.preventDefault(); 

     // trigger scroll 
     controller.scrollTo(id); 

      // if supported by the browser we can even update the URL. 
     if (window.history && window.history.pushState) { 
      history.pushState("", document.title, id); 
     } 
    } 
}); 
}); 

はscrollmagicプラグインを使用してスクロール機能をアンカーを達成する方法です。

アンカーリンクをクリックしたときに上記のコードを使用すると、特定のセクションに移動しません。

Answer 1

私は今日同じ問題を抱えていました。 "window"要素を "#pinContainer"要素で置き換えてください。

から、あなたのコードを変更し

：に

controller.scrollTo(function (newpos) { 
    TweenMax.to(window, 0.5, {scrollTo: {y: newpos}}); 
}); 

：

controller.scrollTo(function (newpos) { 
    TweenMax.to($('#pinContainer'), 0.5, {scrollTo: {y: newpos}}); 
}); 

役に立てば幸いです。