如何跳转到时间轴/补间的中间并从该点继续

时间:2018-04-12 16:04:02

标签: javascript jquery tween scrollmagic timelinemax

我需要能够跳到页面下方的补间中间并且还没有开始,然后在我跳入的位置开始补间。

当我点击导航菜单(在标题中看作未加载的图像)时,我需要被带到正确的滑动面板,然后从那里继续滚动。例如,如果我点击菜单中的“度数”,我想进入“度数”面板,然后可以滚动到下一个面板“人物”。

问题是当我进入面板时,滚动跳回到开头,第一个面板“关于”,而不是继续无缝连接。我该如何解决这个问题?

链接到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();
    })

0 个答案:

没有答案