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.
精彩评论