jQuery - parallax - 正确更新背景位置

Question

目标

这是this one的后续问题。

1. 我正在尝试创建视差滚动效果。

2. 视差容器的实现方式如下：

   ＆LT; div class =“parallax slide-1”＆gt;＆lt; / div＆gt;

当容器滚动到视图时，视差效果成功启动，当离开视图时停止，

问题

不幸的是，当我将视差容器放在页面上时，效果开始于背景位置错误的地方。

我理解为什么会出现这个问题，但我不确定如何解决它。

基本上我需要的是：

1. 视频容器滚动到视图后启动效果：有效。
2. 离开视图后停止效果：有效。
3. 仅将背景位置移动到已进入视图的滚动距离。不是相对于页面顶部滚动的距离。

Fiddle over here

对于页面下方的视差容器：

您可以看到图像的边缘。我正试图找到解决方案。

思想

到目前为止，我的尝试基于这样的想法，即将视差容器的距离仅限于页面顶部一次（不要用每个滚动更新它）并在计算中实现它。

但我似乎无法让它正常工作。我错过了什么吗？

进一步澄清：

1. 任何页面上都可以有多个视差容器。

2. 每个人都可以拥有自己的背景图像集。 （在css中）

3. 我不知道页面上会有多少个视差容器。

4. 我不知道他们的位置。

5. 只有那些可见的移动。

代码

只有相关部分：

$(window).scroll(function(){ // Bind window scroll event
    $( ".parallax" ).each(function() {
        if( $( this ).is_on_screen() ) { // Check if element is visible on screen after DOM loaded

            // ANIMATE PARALLAX EFFECT
            // If Parallax Element is scrolled into view do...

            // Variables
                var speed     = 2.5;
                var calc      = (-window.pageXOffset / speed) + "px " + (-window.pageYOffset / speed) + "px";
                var container = $( this );

            // Function
                container.css({backgroundPosition: calc});

        } else {
            // ...otherwise do nothing
        }
    });
});

Answer 1

我实际上是要对我的旧帖子进行编辑，但是因为你创建了一个新帖子，我会在这里添加。

看到你想要对你的视差进行细化（即2在视野中，但是1只移动10px对30px），你可以做的是将速度选项存储在对象内部，这样，速度运动将变得独立。如此：

$(window).scroll(function(){ // Bind window scroll event
    $( ".parallax" ).each(function() {
        if( $( this ).is_on_screen() ) { // Check if element is visible on screen after DOM loaded

            // ANIMATE PARALLAX EFFECT
            // If Parallax Element is scrolled into view do...
            // set a starting speed for each this:
            // $(this).speed = 2.5;
            //
            // Variables

                var calc      = (-window.pageXOffset / $(this).speed) + "px " + (-window.pageYOffset / $(this).speed) + "px";
                var container = $( this );

            // Function
                container.css({backgroundPosition: calc});

        } else {
            // ...otherwise do nothing
        }
    });
});

编辑：如评论中所述，要设置速度，请尝试以下操作：

$(document).ready(function () {    
    $.fn.is_on_screen = function () {
        //..do your on screen stuff
    };
    $( ".parallax" ).each(function() {
       $(this).speed = 2.5;
    };
});