Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to create strip transition effects similar to Nivo Slider with jquery cycle?

I'm a big fan of the jquery cycle plugin yet it would be cool if it had some more complex transition effects similar to Nivo Slider or jqFancyTransistions.

I understand the jist of how to create custom effects with jquery cycle, yet I'm having a hard time trying to figure out how to create the strip transition effects similar to nivo slider and jqfancytransitions or if its possible at all in jquery cycle. Any help on this would be greatly appreciated. Thanks!

like image 941
hybrid Avatar asked Jul 07 '10 16:07

hybrid


1 Answers

I've whipped up a minimal proof-of-concept demo. It's written as a proper jQuery cycle transition plugin.

Depending on how happy you are with playing with the code, it should provide a good starting point. I have started working from the shuffle transition myself, as that seemed to be the only transition that did more than to manipulate CSS properties, which I think doesn't suffice for what you were aiming for.

Since I've neither used jQuery Cycle before, nor written transition plugins for it, it's entirely possible that I've committed cardinal sins in some details of how it's written.

Also, it can surely be optimized. At this stage, it's written for clarity first, performance second. However, on my (rather fast) machine, the animation and reaction time are fluent and instantaneous.

So, there you have it.

edit: The demo page now includes documentation for additionally exposed options and a few examples that demonstrate how to achieve some different effects just by passing different options.

edit 2: I have generalized the strips to tiles and put many more examples on the demo page.

like image 171
Thomas Avatar answered Sep 28 '22 03:09

Thomas