From our sponsor: Wix’s robust, secure platform lets you develop faster and deliver smarter.
Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name. This plugin idea is inspired by the CSS shaders examples as shown in the CSS shaders Flipbook video by Adobe.
There are several options available, including defining the range of spreading the items when navigating, speed (CSS transitions), adding custom navigations, etc.
For browsers that don’t support CSS 3D transforms or transitions, there will be a simple fallback, i.e. normal navigation of the items (appear/disappear).
For using the plugin, an unordered list with the class “wi-container” is expected:
<ul id="wi-el" class="wi-container"> <li> <img src="images/demo1/1.jpg" alt="image1"/> <h4>Coco Loko</h4> <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <!-- ... --> </ul>
The plugin can be called like this:
$( '#wi-el' ).windy();
Options
The following options are available:
// the options $.Windy.defaults = { // if we want to specify a selector that triggers the next() function. Example: '#wi-nav-next'. nextEl : '', // if we want to specify a selector that triggers the prev() function. prevEl : '', // rotation and translation boundaries for the items transitions boundaries : { rotateX : { min : 40 , max : 90 }, rotateY : { min : -15 , max : 15 }, rotateZ : { min : -10 , max : 10 }, translateX : { min : -200 , max : 200 }, translateY : { min : -400 , max : -200 }, translateZ : { min : 250 , max : 550 } } };
The boundaries define the values for the “dispersing” or “flying away” of the items. The plugin will randomly select a value between the indicated limits.
The following public methods are available to use in combination with navigation elements:
- next()
- prev()
- navigate(position)
If you’d like to see some examples on how to use navigation elements, check out the demos where we use arrows and the jQuery UI slider element.
The CSS transition and basic styling is defined in the windy.css file.
Check out the three demos with different configurations:
Thanks for the plug in. It was exactly what I was looking for. Also thanks for Github add. I’ll make it a point to visit your repo often!
This plugin is AWESOME! thanks for share ^^.
great!!!!!! many thanks, really.
Nice plugin but shows scroll-bar for a while when swift the box.
Hey this is truly wonderful navigation.
Just what i need, great work 🙂
Doesn’t suck in IE either 😀
Everything is very good, but thir is no DEMO for Autoplay.
Can it be done ?
Use an interval to keep calling the next() function.
Wow, this is really awesome example of 3D CSS transformation. Thanks.
Superb… wonderful job… thanks u…
Is it possible to make it available with arrowkeys left/right?
Just wondering how can you put two sets of the elements in one page like two of the demo 1 shuffler without using too much css round-a-bouts?
is this css shaders?
Hi nice article.. I was trying to dynamically update the list. so new images would dynamically appear.
Maybe an endless loop?
I ran into a problem with the new list elements not being indexed? Firebug can show the new elements being created but they are not accessible
I’ve posted partial code on jfiddle just plug them straight into demo1
http://jsfiddle.net/jwtr5/
Loving it! Galleries and image slides and such are funny things. I always find that when I need a good one I can never find it. Hence this one being added directly to my evernote account. I would like to see what it does when a lightbox effect is applied…? Just curious if anyone has tried. If not I will get around to it at some point and re-post. Just thinking that might really make this even more versatile. 🙂
Love the concept, and love the blog BTW! Keep it up man!
Very nice, thanks very much. Demo #3 is my favorite. Degrades nicely.
Opera overlay bug
http://aceiswild.com/ my attempt to use windy with some other codrops tutes. feel free to improve upon the mash-up.
hope you like the comedy album
It is really nice and an innovative plugin…:)
Cheers
It would be ideal if you could make it circular, just like the BookBlock plugin.
This is truly an amazing plugin. Magnificent!