Question

我目前在我的网站的一个小区域中有一个滚动背景，我试图让图像淡出，因为它到达视图框的两侧。所以当图像进入观察区域时，它会变得不透明，然后当它进入中心时变得完全不透明，然后当它到达视图框的另一边时再次淡出。我尝试过应用具有不透明度但没有运气的渐变，并尝试在观察区域放置一个不透明的盒子，这样当图像滚动到该区域时，它会改变不透明度，但这些都不起作用。

我使用一个图像作为背景，但是将它添加到滚动条两次以便它可以循环并看起来像是永远不会结束

关于如何做到这一点的任何想法？

对于滚动背景我正在使用jquery smooth div scroll插件

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

我原来的滚动元素......自我解释

<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图像，从您网站的背景颜色渐变（使用渐变）到透明。第一个是左侧（bg颜色为透明），第二个是第一个的水平翻转版本（透明到bg颜色）。只需将这两个图像绝对放置在可滚动区域的左/右上方，并允许图像在其后面滑动。如果您的可视区域是固定大小，您也可以使用一个大图像执行此操作。有意义吗？

如果你看一下这个网站（不是我的）：http://www.pauljnoble.com/photos，那就是我想要的想想的。这是他们正在使用的叠加图像：http://www.pauljnoble.com/img/bg/photos-shadow-3.png。

滚动背景与不透明度的视图框的羽毛边缘

1 个答案: