我需要能够跳到页面下方的补间中间并且还没有开始,然后在我跳入的位置开始补间。
当我点击导航菜单(在标题中看作未加载的图像)时,我需要被带到正确的滑动面板,然后从那里继续滚动。例如,如果我点击菜单中的“度数”,我想进入“度数”面板,然后可以滚动到下一个面板“人物”。
问题是当我进入面板时,滚动跳回到开头,第一个面板“关于”,而不是继续无缝连接。我该如何解决这个问题?
链接到jsfiddle以查看完整代码(在“就业”菜单按钮事件监听器中,您可以看到我使用play()
和seek()
以及controller.ScrollTo()
的尝试,也许正在使用他们的组合不正确。)
// Initialize ScrollMagic controller
var controller = new ScrollMagic.Controller();
// Define movement of panels
var wipeAnimation = new TimelineMax()
.to("#slideContainer", 1, {x: "-11.11%"}) // to Degrees
.to("#slideContainer", 1, {x: "-22.22%"}) // to People
.to("#slideContainer", 1, {x: "-33.33%"}) // to Research
.to("#slideContainer", 1, {x: "-44.44%"}) // to Employment
.to("#slideContainer", 1, {x: "-55.56%"}) // to Employment2
.to("#slideContainer", 1, {x: "-66.67%"}) // to Employment3
.to("#slideContainer", 1, {x: "-77.78%"}); // to Resources
// Create scene to pin and link animation
var scene = new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "600%" // slows down scrolling
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
//.addIndicators()
.addTo(controller);
/**************************** MENU ****************************/
$('.menu-btn').each(function(index, element) {
$(this).on('click', function() {
var name = $(this).text();
if (name == "Degrees") {
wipeAnimation.seek(1);
wipeAnimation.play(1);
} else if (name == "People") {
wipeAnimation.seek(2);
} else if (name == "Research") {
wipeAnimation.seek(3);
} else if (name == "Employment") {
//wipeAnimation.seek(4);
//controller.scrollTo('#start');
// controller.scrollTo('#employmentAnchor')
//scene.progress(0.56);
//wipeAnimation.play(4);
//alert(scene.progress());
//scene.progress(0.5);
//controller.scrollTo('#start');
//alert('current pos: ' + controller.scrollPosMethod());
//wipeAnimation.play(4);
//wipeAnimation.start();
//wipeAnimation.play(4);
} else if (name == "Resources") {
wipeAnimation.seek(5);
}
});
})
$('.menu').on('click', function() {
$('nav').show();
})