jquery - 基于图像位置的视差效果

Question

我仍在为客户开发基于 3 个级别的视差网站。我遇到了一个问题，使我无法在第三个顶级中添加。

网站本身有全屏背景，可以单速滚动。它是一个很长的垂直图像缓慢滚动。最重要的是以标准速度滚动的内容。

第三层只是位置:位于某些内容区域之上的绝对图形。基本上是 float 图像。

我遇到的问题是，对于大多数视差插件，我已经尝试过 float 的第三级图像没有任何东西可以消失。这意味着虽然我可以在更改屏幕尺寸后立即根据屏幕尺寸设置它们，但我看到它消失在一条看不见的线后面。

我可以使用任何插件或方法来阻止这种情况的发生吗？所以基本上我想设置一个图像所在的位置，如果视差效果不起作用，它会围绕该点产生视差。

Answer 1

您需要编写自己的代码，基于纯 jquery/javascript。

插件是为简单的操作而创建的。 您需要根据当前的 $(document).scrollTop()

创建 JS 应用程序

主要代码模式为:

$(window).on('scroll resize',function(){
  var Top = $(document).scrollTop();
  if(Top < 200){ /*slide1 actions*/ }
  else if(Top >= 200 && Top < 400){ /*slide2 actions*/ }
  else if(Top >= 400 && Top < 600){ /*slide3 actions*/ }
  // etc
});

同样使用这个技巧https://stackoverflow.com/a/11709360/1136141获得更多性能