1

在此处输入图像描述

你好呀。我用ScrollMagic做了一个视差滚动。但它几乎没有像这张 GIF 图像这样的问题。滚动时，图像会滚动，但同时会反复上下移动。这个问题可以在 OS X 10.11 上的 Safari、Firefox、Chrome 中找到我是否编码错误的源代码？请确认来源。非常感谢阅读。有一个很好的代码：>

索引.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="greensock/TweenMax.min.js"></script>
        <script src="js/scrollmagic/uncompressed/ScrollMagic.js"></script>
        <script src="js/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
        <script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
        <script type="text/javascript" src="skrollr.min.js"></script>
    </head>
    <body style="height: 15500px">
        <img id="logo" src="logo.png"></img>
        <img id="logo-fix" src="logo.png" style="position: fixed; right: 5px;"</img>
        <h2 id="pt1" style="position: absolute">ParallaxTest 1</h2><br><br>
        <h2 id="pt2" style="position: absolute">ParallaxTest 2</h2>


<!-- Parallax scroll code start -->
        <section id="trigger2">
            <div id="pxPt" style="position: relative">
                <!-- You'll be not able to see loose1.png in GIF, cause did not recored. -->
                <img id="pt1" style="position: absolute" src="loose1.png"></img>
                <img id="pt2" style="position: absolute" src="loose2.png"></img>
                <img id="pt3" style="position: absolute" src="loose3.png"></img>
            </div>
        </section>
<!-- Parallax scroll code end -->

    </body>
</html>

<script>
    $(function () { // wait for document ready
        var controller = new ScrollMagic.Controller();
        // build scene
        var logoScene = new ScrollMagic.Scene({
            pushFollowers: false,
            duration: 0,  // the scene should last for a scroll distance of 100px
            offset: 0      // start this scene after scrolling for 50px
        })
        .setPin("#logo") // pins the element for the the scene's duration
        .addTo(controller);


// Parallax scroll code start
        var tween = new TimelineMax()
        .add([
            TweenMax.fromTo("#pxPt #pt1", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),
            TweenMax.fromTo("#pxPt #pt2", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),
            TweenMax.fromTo("#pxPt #pt3", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})
        ]);

        var parallaxScene = new ScrollMagic.Scene({
            triggerElement: "#trigger2",
            duration: 15500
        })
        .setTween(tween)
        .addIndicators()
        .addTo(controller);
// Parallax scroll code end

    });
</script>
4

0 回答 0