你好,我正在努力创建简单的视差效果,但是有一个简单的问题,就是如果没有那么滚动顶部,则无法正常工作,我需要如果用户滚动到底部,请将花朵的位置动画到顶部:-20%左:-20%,如果他滚动到顶部,请将花朵的位置动画到顶部:0;左:0;



$(document).ready(function () {
    $(window).scroll(function () {
        var flowersLeft = $(".flowers-topleft")
        if ($(window).scrollTop() > 50){
            $(flowersLeft).animate({
                top: "-18%",
                left: "-20%"
            }, 600);
            $("body").css("background", "green");
        }
        else {
            $(flowersLeft).animate({
                top: "0",
                left: "0"
            }, 600);
            $("body").css("background", "black");
        }
    })
})

html{
                height:100%;
            }
            body{
                height:6000px !important;
                background-color:#ff0000;
            }
            .flowers-topleft {
                width: 50%;
                height: 50%;
                position:fixed;
                top:auto;
                left:auto;
                background-image: url("http://cafefrida.ca/img/flowers-topleft.png");
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: cover !important;
            }
            .flowers-topright {
                width: 50%;
                height: 50%;
                position: absolute;
                top: 0;
                right: 0;
                background-image: url(http://cafefrida.ca/img/flowers-topright.png);
                background-repeat: no-repeat;
                background-position: left bottom;
                background-size: cover !important;
            }
            .flowers-bottomright {
                height: 58%;
                width: 50%;
                position: absolute;
                bottom: 0;
                right: 0;
                background-image: url(http://cafefrida.ca/img/flowers-bottomright.png);
                background-repeat: no-repeat;
                background-position: left top;
                background-size: cover !important;
            }
            .flowers-bottomleft {
                height: 50%;
                width: 50%;
                position: absolute;
                bottom: 0;
                left: 0;
                background-image: url(http://cafefrida.ca/img/flowers-bottomleft.png);
                background-repeat: no-repeat;
                background-position: right top;
                background-size: cover !important;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flowers-topleft"></div>
    <div class="flowers-topright"></div>
    <div class="flowers-bottomright"></div>
    <div class="flowers-bottomleft"></div>

最佳答案

我不太确定我是否正确理解了您的问题,但是在.stop()之前添加一个简单的.animate()将使您的动画在滚动时正常工作。但这是一个非常基本的“视差效果”。

$(document).ready(function () {
    $(window).scroll(function () {
        var flowersLeft = $(".flowers-topleft")
        if ($(window).scrollTop() > 50){
            $(flowersLeft).stop().animate({
                top: "-18%",
                left: "-20%"
            }, 600);
            $("body").css("background", "green");
        }
        else {
            $(flowersLeft).stop().animate({
                top: "0%",
                left: "0%"
            }, 600);
            $("body").css("background", "black");
        }
    })
})


.stop()将结束元素上所有当前正在运行的动画。见.stop() jQuery api

10-05 21:06
查看更多