Submit your widget

jQuery and CSS3 Image Flyout Slider effect

Created 3 years ago   Views 36891   downloads 7246    Author webstuffshare
 jQuery and CSS3 Image Flyout  Slider effect
View DemoDownload 538.4 KB
101
Share |

This is an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack. We will use CSS3 transition, animation and transform for this animation and jQuery for helping us maintain click event, CSS transition and animation.

This image slider doesn’t do slide on displaying image, as I described before it will be flying out the selected image to the front of images stack. So all images will be positioned stacked each other. When user click on of the image, it will be move to the outer left of image stack and move back with rotating effect to the stack and positioned on top of it.

The HTML & Styling

The HTML structure is very simple, we need two divs for wrapping images and their description. The first div named itemlist and the other named itemdescription. Each of them has children, itemlist will have list of all images and the other will have list of all descriptions.

<div id="container">
  <div id="itemlist">
  	<img src="images/busby.jpg" alt="Busby" id="busby">
    <img src="images/gridly.jpg" alt="Gridly" id="gridly">
    <!-- to n image -->
  </div>
  <div id="itemdescription">
    <span data-for="busby">Busby Theme</span>
    <span data-for="gridly">Gridly Theme</span>
    <!-- to n description -->
  </div>
</div>

Read more:http://www.webstuffshare.com/2012/07/flyout-image-slider-using-jquery-css3/