1

3 セクションのページにナチュラル ワイプを追加しようとしています。セクションのうちの 2 つには、最初は苦労した「追加コンテンツ」があります。これが scrollmagic とナビゲーション リンクで機能するようになったので、残っている唯一の項目は、移動スクロール アニメーションを失うことなく 3 つのセクションをワイプすることです。

このコードペンを見て、目前の問題を説明する必要があります。前もって感謝します！

http://codepen.io/sandovalg/pen/BoKzxB

// Init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
duration: $('section').height(),
triggerHook: .025,
reverse: true
}
});

var scene1 = new ScrollMagic.Scene({ triggerElement: '#intro' })
                            .setClassToggle('#intro-anchor', 'active')
                            .addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: '#section-1' })
                            .setClassToggle('#anchor1', 'active')
                            .addTo(controller);
var scene3 = new ScrollMagic.Scene({ triggerElement: '#section-2' })
                            .setClassToggle('#anchor2', 'active')
                            .addTo(controller);
// Change behaviour of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {

TweenMax.to(window, 0.5, {
scrollTo : {
  y : target,
  autoKill : true // Allow scroll position to change outside itself
},
ease : Cubic.easeInOut
});

});


//  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 also update the URL
if (window.history && window.history.pushState) {
  history.pushState("", document.title, id);
}
}

});
4

0 に答える 0