jQuery - 视差 - 正确更新背景位置答案

【问题标题】：jQuery - parallax - update background position correctlyjQuery - 视差 - 正确更新背景位置
【发布时间】：2014-06-19 12:39:17
【问题描述】：

目标

这是this one 的后续问题。

我正在尝试创建视差滚动效果。
视差容器是这样实现的：

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

问题

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

我明白为什么会出现这个问题，但不知道如何解决。

我需要的基本上是这样的：

视差容器滚动到视图中后开始效果：有效。
离开视图后停止效果：有效。
仅将背景位置移动自进入视图后滚动的距离。不是相对于页面顶部的滚动距离。

Fiddle over here

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

您可以看到图像的边缘。我正在为此寻找解决方案。

想法

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

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

进一步澄清：

任何页面上都可以有多个视差容器。
每个都可以有自己的背景图像集。（在 CSS 中）
我不知道一个页面上会有多少个视差容器。
我不知道它们放在哪里。
只有那些可见的才能移动。

代码

只有相关部分：

$(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
        }
    });
});

标签： jquery scroll window parallax

【解决方案1】：

我本来打算对我的旧帖子进行编辑，但是既然你做了一个新的，我会在这里添加它。

看到您想要细化您的视差（即 2 个在视野中，但 1 个仅移动了 10 像素和 30 像素），您可以将速度选项存储在对象中，这样，速度运动将变得独立。因此：

$(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
        }
    });
});

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

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

【讨论】：

嗨，迪伦，非常感谢您再次与我们联系！巨大的道具。据我了解，您的方法需要我为放置在页面上的每个视差容器手动设置速度，对吗？我正在寻找一个不需要这样做的解决方案。我用原始代码创建了a fiddle over here。基本上我想摆脱这样一个事实，即您可以在页面下方看到视差容器的图像边缘。
你可以在你的 document.ready 函数中创建一个 .each 循环（如上面的那个），并设置每个速度......除此之外，我想确保我做对了。当您在页面上滚动时，您想让页面只有一个图像吗？或者您是否希望拥有它以便拥有两个图像，但只有最主要的一个动作？还是？
附加 .each 循环的有趣想法。我会试一试。澄清：任何页面上都可以有多个视差容器。每个都可以有自己的背景图像集。我不知道一个页面中有多少视差容器或它们放置在哪里。只有那些可见的移动。非常感谢您迄今为止的帮助！
没问题。感谢您的澄清。我将在几秒钟内为初始的 .each 添加一个编辑
嗯...不，我似乎无法让它工作:-( Heres a Fiddle