在视差 ScrollMagic 站点中使用链接答案

【问题标题】：Using links within a parallax ScrollMagic site在视差 ScrollMagic 站点中使用链接
【发布时间】：2014-07-11 16:15:26
【问题描述】：

我正在使用 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();
});

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

谢谢

【问题讨论】：

标签： javascript jquery parallax gsap scrollmagic

【解决方案1】：

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

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

希望这会有所帮助。
J

【讨论】：

【解决方案2】：

我做了类似的事情，使用与demo page类似的设置

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);

}

【讨论】：