Windy: A Plugin for Swift Content Navigation

This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm.

Windy

View demo Download source

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:

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 48

Comments are closed.
  1. 1

    Awesome gadget!.
    I tested this plugin on a google site. Create it using a google gadget.
    There is overlay problem. All the images are just displayed in a list.
    Would be nice if it can work on google sites too :)

  2. 3

    Nice Plugin !

    Your demo is working fine on Chrome. I tried to implement this and working fine in Firefox but Animation is not happening in chrome. Its just showing transition but not that page curling or windy effect.

    What will the issue be ? Please help me to get it done !!

    ThankYou

  3. 4

    Hi,

    Navigating to next image is fine.
    but navigating back to previous image leaves image in background.( That means the images are stacked one on the other)

    For example,

    If you have images with transparent background you can easily find out that there is the previous image on the background.
    but navigating to next image is fine.

    Can any one please tell me how to overcame this ?

    Or if not implemented ,
    @Pedro : please look into this issue . hope I am clear..

    Thank you

  4. 5

    Pretty plugin! But it can be awesome – if you’ll add possibility to preview images and click on it to choose. Thanks

  5. 6

    very nice effect. is it possible to show more than one windy on a site? i tried but it doesn’t work. i think because of the div id…

Comments are closed.