Javascript 我的视差滚动移动不平稳_Javascript_Jquery_Html_Scrollmagic

Javascript 我的视差滚动移动不平稳

javascript jquery html

Javascript 我的视差滚动移动不平稳,javascript,jquery,html,scrollmagic,Javascript,Jquery,Html,Scrollmagic,你好。我做了一个视差滚动。但它没有像这个GIF图像这样的问题。滚动时，图像会滚动，但会在同一时间反复上下移动。这个问题可以在Safari、Firefox和OS X 10.11上的Chrome中找到。我是否编写了错误的源代码？请确认来源。非常感谢阅读。有一个好的代码：> index.html <html> <head> <link rel="stylesheet" type="text/css" href="index.css">

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

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>


视差测试1


视差计2
$（函数（）{//等待文档准备就绪
var controller=new ScrollMagic.controller（）；
//构建场景
var logosecene=new ScrollMagic.Scene({
他说：错，
持续时间：0，//场景应持续100px的滚动距离
偏移量：0//滚动50px后启动此场景
})
.setPin（“#logo”）//在场景持续时间内固定元素
.addTo（控制员）；
//视差滚动码开始
var tween=新的TimelineMax（）
.添加([
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=新的ScrollMagic.Scene({
triggerElement:“#trigger2”，
持续时间：15500
})
.塞特温（吐温）
.addIndicators（）
.addTo（控制员）；
//视差滚动码结束
});