Animated Photo Stack with CSS3 and jQuery |

Home Image EffectsAnimated Photo Stack with CSS3 and jQuery

Animated Photo Stack with CSS3 and jQuery

10 years ago Views

16324

2413

tutorialzine

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>