0

我正在使用 ScrollMagic 制作一个垂直视差滚动站点，其中包括顶部的导航菜单以链接到站点内。

当没有视差动画应用于滚动时，菜单本身可以正常工作，但是当添加视差时（即第二部分向上移动到介绍部分），移动到该部分时似乎无法考虑整体高度的减少，所以它过冲。

这是一些代码：

var site = {
    smController : {},

    init : function () {
        site.setupScroll();
        site.setupMainNavigation();
        site.setupAnimation();
    },

    setupScroll : function () {
        // init the smController
        var controller = new ScrollMagic({
            globalSceneOptions: {
                triggerHook: "onLeave"
            }
        });

        site.smController = controller;
    },

    setupMainNavigation : function () {
        $('.menuclick').on('click', function (event) {
            event.preventDefault();
            var anchor = $(this),
                sectionId = $(anchor.attr('href'));

            site.scrollToSection(sectionId);
        });
    },

    /**
     * uses tweenlite and scrolltoplugin from greensock
     * @param  {string} sectionId id of section to scroll to
     * @return {void}
     */
    scrollToSection : function (sectionId) {
            var scrollYPos = $(sectionId).offset().top;

            TweenLite.to(window, 0.5, { scrollTo:{ y: scrollYPos } });
    },

    setupAnimation : function () {
        // parallax animation - move marginTop back by 100%
        var tween = new TimelineMax()
                .to('#section1', 2, { marginTop: '-100%', ease:Linear.easeNone });

        var controller = site.smController,
            scene = new ScrollScene({ duration: 500 })
                .setTween(tween)
                .addTo(controller);

        // show indicators (requires debug extension)
        scene.addIndicators();
    }
};

$(document).ready(function () {
    site.init();
});

有没有人有一个策略来处理像这样的移动（视差）部分？

谢谢

4

2 回答 2

1

在 ScrollMagic 1.1 中，您现在可以提供自定义滚动功能并滚动到特定场景的开头。
在这里阅读更多：http: //janpaepke.github.io/ScrollMagic/docs/ScrollMagic.html#scrollTo

我还强烈建议不要将动画元素用作滚动目标，因为它们在启动滚动之前和之后的位置可能不同。
如果您有影响 DOM 高度的元素，请尝试将它们从 DOM 流中移除。
例如，您可以通过添加一个元素作为占位符并将您的元素设置为绝对定位来做到这一点。

希望这可以帮助。
Ĵ

于 2014-09-05T16:20:20.173 回答
0

我做了类似的事情，使用与演示页面类似的设置

new ScrollMagic.Scene(settings)
.setPin(slides[i])
.on('enter', function () {
    var $trigger = $(this.triggerElement()),
        $nextSlide = $trigger.parent().next().find('.slide');

    /*
     * If there's a next slide,
     * update the href of the button
     * to target the next slide
     * otherwise, we're at the end;
     * toggle the button state so it targets
     * the top of the page
     */
    if ($nextSlide.length) {
        $('.btn-scroll').attr('href', '#' + $nextSlide.attr('id'));
    } else {
        $('.btn-scroll').attr('href', '#').addClass('up');
    }

})
.on('leave', function (event) {
    var $trigger = $(this.triggerElement()),
        $firstSlide = $('.slide:first');

    /*
     * If we're going back up and we pass
     * the first slide, update the button
     * so it targets the first slide
     */
    if (event.scrollDirection === 'REVERSE' && ($trigger.offset().top === $firstSlide.offset().top)) {
        $('.btn-scroll').attr('href', originalTarget).removeClass('up');
    }
})
.addTo(controller);

它只需要一个将 href 设置为第一张幻灯片的锚链接。

和这样的东西来处理滚动：

var scrollToContent = function (target, speed) {
if (target === '#') {
    target = $('body');
} else {
    target = $(target);
}

speed = typeof speed !== 'undefined' ?  speed : 'slow';

$('html, body').animate({
    scrollTop: target.offset().top
}, speed);

}

于 2015-04-16T00:43:28.790 回答