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

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

我使用一个图像为背景，但其添加到滚动条的两倍，使其能循环，看起来就像是永无止境

如何做到这一点任何想法？

因为我使用jQuery平滑滚动的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>

来源

2012-02-09 user834418

什么不适用于你已经尝试过的东西？发布您的代码。 – Ryan 2012-02-09 19:38:05

好吧，没有工作的是，不透明度不适用于图像。我将在问题中发布代码 – user834418 2012-02-09 19:49:46

您必须发布您的非工作代码，以便我们可以看到问题所在。 – 2012-02-09 19:52:13

我会做2个透明的PNG图像，从您的网站的背景颜色渐变（渐变）到透明。第一个是左侧（bg颜色透明），第二个是第一个（透明到bg颜色）的水平翻转版本。只需将这两幅图像绝对放置在可滚动区域的左侧/右侧，并让图像在其后面滑动即可。如果您的可视区域是固定大小，您也可以用一个大图像来做到这一点。合理？

如果你看看这个网站，例如（不是我的）：http://www.pauljnoble.com/photos，它做我想认为你正在寻找。以下是他们使用的叠加图片：http://www.pauljnoble.com/img/bg/photos-shadow-3.png。

来源

2012-03-09 20:33:41

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

回答

相关问题