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> 

자바 스크립트 코드

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

희망을.