视差鼠标移动帮助，JQuery，HTML，CSS

Question

我仍然是JQuery的初学者，我自己利用mousemove自己想出了一个视差背景（我相信这被称为视差效果）。我正在使用event.pageX创建一个稍后用于设置背景位置的变量。

它有效，但代码是新手级别。每次刷新页面时，我都需要移动鼠标作为背景以启动视差效果 - 例如，背景以50％0％开始，当我移动鼠标时，它会达到10.5％0％并且是在第一次初始鼠标移动后平滑。

我想知道是否有办法在页面加载时自动调用mousemove函数。或者是否有更好的方法来重新格式化代码以实现我的目标？

JS

$('.background').on( "mousemove", function( event ) {
    var Xparallax = (event.pageX / 300)
    $('.background').css({
        'background-position' : Xparallax + '% 15%'
    });
});

HTML

<div class="background" style=""></div>

CSS

div.background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-image: url("/images/bg3.jpg");
    background-position: 50% 15%;
    background-size: 125%;
}

Answer 1

试试这个：

$(window).scroll(function(){
var Xparallax = $(this).scrollTop();
    $('.background').css({
        'background-position' : Xparallax + '% 15%'
    });
})