开发者

Feathered clipping mask for jCarousel

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.

Hopefull开发者_C百科y 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)?


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜