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

目标

这是对此问题的后续问题。

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

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

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

问题

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

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

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

1. 一旦视差容器滚动到视图中就开始效果： 工作 。
2. 离开视图后停止效果： 工作 。
3. 仅将背景位置移动到已进入视图的滚动距离 。 不是相对于页面顶部滚动的距离。

在这里摆弄

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

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

思考

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

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

进一步澄清：

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

我实际上是要对我的旧post进行编辑，但是既然你做了一个新的，我会在这里添加它。

看你想要对你的视差进行细化（即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; }; });