1

我正在尝试将自然擦除添加到三 (3) 部分页面。其中两个部分有“附加内容”，一开始就引起了争论。现在，这适用于滚动魔术和导航链接，剩下的唯一项目是部分擦除三个部分，而不会丢失移动的滚动动画。

看看这个codepen它应该解释手头的问题。提前致谢！

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