jQuery and CSS3 Image Flyout Slider effect
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
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>
You might also like
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu