Question

你好。我用ScrollMagic进行了视差滚动。但它没有像这个GIF图像那样的问题。滚动时，图像会滚动，但在同一时间内反复上下移动。这个问题可以在Safari，Firefox，Chrome OS X 10.11上找到我编码错误的来源吗？请确认来源。非常感谢，阅读它。有一个很好的代码：＆gt;

的index.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>

我的视差滚动没有顺利进行

0 个答案: