javascript - 具有不透明度的滚动背景 View 框的羽化边缘

Question

我目前在我网站的一个小区域有一个滚动背景，我试图让图像在到达 View 框的两侧时淡出。因此，当图像进入查看区域时，它会变得不透明，然后在进入中心时变得完全不透明，然后在碰到 View 框的另一边缘时再次淡出。我曾尝试应用具有不透明度的渐变，但没有成功，并且还尝试在查看区域上放置一个具有不透明度的框，以便当图像滚动到该区域时它会改变不透明度，但这些都不起作用。

我使用一张图片作为背景，但将它添加到滚动条中两次，这样它就可以循环播放，看起来好像永无止境

关于如何做到这一点有什么想法吗？

对于滚动背景，我使用的是 jquery smooth div 滚动插件

编辑:这是我试过的一些代码

我原来的滚动元素......不言自明

<div id='cloud-viewer'>
  <div class='scrollWrapper'> //view box
    <div id='cloud-wrapper' class='scrollableArea'> //scrolling in here
      <div id='clouds-1' class='clouds'></div>
      <div id='clouds-2' class='clouds'></div>
    </div>
  </div>
</div>

我已经尝试通过以下几种方式在代码中放置一个不透明的元素

<div id='cloud-viewer'>
  <div id='opaque'></div> //this had css to keep it in pos and opacity
  <div class='scrollWrapper'>
    <div id='opaque'></div> //this gets scrolled...
    <div id='cloud-wrapper' class='scrollableArea'>
      <div id='clouds-1' class='clouds'></div>
      <div id='clouds-2' class='clouds'></div>
    </div>
  </div>
</div>

Answer 1

我会制作 2 个透明的 PNG 图像，它们从您网站的背景颜色淡化(带有渐变)为透明。第一个将用于左侧(背景颜色到透明)，第二个将是第一个的水平翻转版本(透明到背景颜色)。只需将这两个图像绝对放置在可滚动区域的左/右侧顶部，并允许图像在其后面滑动。如果您的可视区域是固定大小，您也可以使用一张大图像来执行此操作。有道理吗？

例如，如果您查看此站点(不是我的站点):http://www.pauljnoble.com/photos ，它满足了我认为您正在寻找的需求。这是他们使用的叠加图像:http://www.pauljnoble.com/img/bg/photos-shadow-3.png .