Animated Photo Stack with CSS3 and jQuery
we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
The HTML
As always, the first step is to present the markup of the example. We are starting with a regular HTML5 document in which we are including a number of CSS/JS files:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title> <!-- CSS Includes --> <link href="assets/css/style.css" rel="stylesheet" /> <link href="assets/css/animate.css" rel="stylesheet" /> </head> <body> <ul id="photos"> <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/" style="background-image:url(...)">Landscape 5</a></li> <!-- More photos here --> </ul> <a href="#" class="arrow previous"></a> <a href="#" class="arrow next"></a> <!-- Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="assets/js/script.js"></script> </body> </html>
Read more:http://tutorialzine.com/2013/02/animated-css3-photo-stack/
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation 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