背景中心视差效果跳到顶部

Question

我正在使用以下代码为背景图像提供简单的视差效果。理想情况下，在 css 中，我希望图像居中（而不是顶部）。但是，一旦我开始滚动脚本，它就会跳到顶部并开始产生效果。我不知道是否可以更改 jquery 以使其以居中图像开头？有人可以帮忙吗？

<div id="para" style="background-image: url('blah')" data-speed="8" data-type="background">
</div>

#para {
    height:500px;
    float:left;
    width:100%;
    background-size:100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachemnt: fixed; 
}

//Parallax
$(document).ready(function() {
    if ($(window).width() > 1025) {
        // Cache the Window object
        $window = $(window);
        $('div[data-type="background"]').each(function() {
            var $bgobj = $(this);
            $(window).scroll(function() {
                var yPos = -($window.scrollTop() / $bgobj.data('speed'));
                var coords = '50% ' + yPos + 'px';
                $bgobj.css({
                    backgroundPosition: coords
                });
            });
        });
    }
});

Answer 1

您不能为 background-position 指定百分比和像素。它应该是一个或另一个。使用百分比单位，然后将 $window.scrollTop() 也转换为百分比。所以乘以 100 然后除以 $window.height().

//Parallax
$(document).ready(function() {

    if ($(window).width() > 1025) {
        // Cache the Window object
        $window = $(window);
        $('div[data-type="background"]').each(function() {
            var $bgobj = $(this);
            $(window).scroll(function() {
                var yPos = 50 - ($window.scrollTop() * 100 / $window.height() / $bgobj.data('speed'));
                var coords = '50% ' + yPos + "%";
                $bgobj.css({
                    backgroundPosition: coords
                });
            });
        });
    }
});

您的数据速度属性也需要降低。我发现 0.5 效果很好。

<div id="para" style="background-image: url('blah')" data-speed="0.5" data-type="background">

背景中心视差效果跳到顶部

Background center parallax effect jumps to top

jquery

background-image

parallax