当图像超出限制时停止视差效果

Stop parallax efect when image goes out of limits

本文关键字：视差 图像      更新时间：2023-09-26

我正在使用stellar.js来调整视差。它工作正常，但我认为一个很好的改进是，当图像的顶部或底部边界超出限制时（你可以看到图像边缘），它可以被检测到，所以当这种情况发生时，视差效应应该停止，图像的滚动速度等于滚动速度。所以你永远不会看到任何图像边缘，或者在使用的情况下看到任何图像重复（背景重复：重复；）我真的不知道如何实现这一点。如果有人能帮我，那就太好了。

您可以使用getBoundingClientRect检查图像是否到达另一个元素的顶部或底部，它会为您提供一个对象，通知元素侧面相对于视口的绝对坐标。

假设这种布局：

       topEl  
 +----------------+    
____________________
 |     image      |
____________________
 +----------------+  
      bottomEl

JavaScript:

var imageRect    = image.getBoundingClientRect();
var topElRect    = topEl.getBoundingClientRect();
var bottomElRect = bottomEl.getBoundingClientRect();
if (imageRect.top >= topElRect.bottom ||
    imageRect.bottom <= bottomElRect.top) {
   // Stop scrolling
}

如果您想要更精确的解释，请随时更新更多细节。

相关文章：