0

サイト内にリンクするための上部にナビゲーション メニューを含む ScrollMagic を使用して、縦方向のパララックス スクロール サイトを作成しています。

スクロールに視差アニメーションが適用されていない場合、メニュー自体は正しく機能しますが、視差が追加されると (つまり、2 番目のセクションがイントロ セクションの上に移動します)、セクションに移動するときに全体の高さの減少を考慮することができないようです。 、オーバーシュートします。

ここにいくつかのコードがあります：

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 フローから除外してみてください。
たとえば、要素をプレースホルダーとして追加し、要素を絶対配置として設定することで、これを行うことができます。

お役に立てれば。
J

于 2014-09-05T16:20:20.173 に答える