jCarousel 的羽毛剪贴蒙版

发布于 2024-11-30 02:02:06 字数 352 浏览 0 评论 0原文

我有一组使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

生死何惧 2024-12-07 02:02:06

这里是一个带有羽化边缘的 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

柒七 2024-12-07 02:02:06

一种方法是制作一个透明的 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 higher z-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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文