jCarousel 的羽毛剪贴蒙版
我有一组使用 jCarousel 连续滚动的图像。一次只能完全显示一张图像,我希望能够“羽化”轮播的边缘,以便图像在穿过可见性时淡入淡出。
希望这是有道理的。
此外,旋转木马的运动有时似乎有点问题。偶尔加载页面时,轮播初始化中的 animation
和/或 auto
参数似乎未正确实现,导致轮播移动得比预期更快,或者推迟更长的时间等等。有什么想法吗?
编辑添加:是否有可能有一种方法,代替真正的剪切蒙版,使用 jCarousel 的回调之一在图像移出轮播焦点时对图像执行 fadeOut()
(然后fadeIn()
当图像移入焦点时)?
I have a set of images scrolling continuously with jCarousel. Only one image is fully displayed at a time, and I would love to be able to "feather" the edges of the carousel so the images fade in and out as they traverse visibility.
Hopefully that makes sense.
Also, the carousel's motion seems a bit buggy at times. On occasional page loads it seems like the animation
and/or auto
parameters in the initialization of the carousel aren't being implemented properly, causing the carousel to either move quicker than expected, or delay longer, etc. Thoughts?
Edit to add: Is there possibly a way, in lieu of a true clipping mask, to use one of jCarousel's callbacks to perform fadeOut()
on an image as it moves out of the carousel's focus (and then fadeIn()
as an image moves into focus)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这里是一个带有羽化边缘的 jcarousel 示例
从技术上讲,它并不是真正的羽化,只是在其上有半透明的 PNG顶部。我认为没有办法拥有真正的羽毛
Here is an example of jcarousel with feathered edges
Technically it isn't really feathered, there's just semi transparent PNG over the top. I don't think there is a way to have a true feather
一种方法是制作一个透明的 PNG,其渐变从透明渐变到轮播背景的颜色,并使用 CSS
position:absolute
和更高的z-index
比轮播容器 div 将其放置在顶部。 这是一个包含一些示例的页面 - 特别注意透明度部分。One way to do it would be to make a transparent PNG with gradients that fade from transparent to the color of the background of your carousel, and use CSS
position:absolute
with a higherz-index
than the carousel container div to place it on top. Here's a page with some examples- pay attention to the transparency section in particular.