Tutorial Animated CSS3 Photo Stack

DEMO DOWNLOAD

In this tutorial, 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

01<!DOCTYPE html>

02<html>

03<head>

04    <meta charset="utf-8" />

05

06    <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>

07

08    <!-- CSS Includes -->

09    <link href="assets/css/style.css" rel="stylesheet" />

10    <link href="assets/css/animate.css" rel="stylesheet" />

11

12</head>

13<body>

14

15    <ul id="photos">

16        <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/"

17        style="background-image:url(...)">Landscape 5</a></li>

18        <!-- More photos here -->

19    </ul>

20

21    <a href="#" class="arrow previous"></a>

22    <a href="#" class="arrow next"></a>

23

24    <!-- Libraries -->

25    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

26    <script src="assets/js/script.js"></script>

27

28</body>

29</html>

The #photos UL holds the photos that we will be animating. For each photo, I’ve defined a LI item with an anchor element inside it. The image is set as the background-image property of the link. As you will see in the CSS part, I am using the background-size property to force the image to cover the entire width and height of the link. When adding more photos, keep in mind that because they are positioned absolutely, they will be shown in reverse order (the last photo will be at the top).
In the head section of the document, I am including our main stylesheet and animate.css – the library that gives us those wonderful CSS3 animations. Before the closing body tag, we have the jQuery library and script.js which we will discuss next.

The JavaScript

To trigger the effects that the animate library gives us, we have to assign a class name to the element with the name of the animation. We will also have to move the animated photo at the bottom of the stack after the animation finishes, so that we can show the next image. Here is what we need to do in order to make this example work:

First, we will listen for clicks on the arrows;
Then, when a click occurs on the next arrow, we will trigger a randomly chosen CSS animation by assigning a class name to the topmost element of the stack (this is actually the last LI item because of the positioning);
After one second, when the animation completes, we will move the animated element before the other LIs with the prependTo jQuery method (this will push it to the bottom of the stack) and remove the classes that we’ve assigned above.
For the previous arrow, we will do nearly the same, with the only difference being that we will take the last image and place it at the top of the stack before triggering the animation.

In addition, I will also add auto-advance functionality like we did in this article. This will turn the example into a cool slideshow that stops the automated transitions when you click one of the arrows.
Here is what the code looks like:

assets/js/script.js

01$(function() {

02

03    var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown',

04        'hinge', 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft',

05        'lightSpeedOut', 'rollOut'];

06

07    var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight',

08            'rotateIn', 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown']; 

09

10    var photos = $('#photos'),

11        ignoreClicks = false;

12

13    $('.arrow').click(function(e, simulated){

14        if(ignoreClicks){

15

16            // If clicks on the arrows should be ignored,

17            // stop the event from triggering the rest

18            // of the handlers

19

20            e.stopImmediatePropagation();

21            return false;

22        }

23

24        // Otherwise allow this click to proceed,

25        // but raise the ignoreClicks flag

26

27        ignoreClicks = true;

28

29        if(!simulated){

30            // Once the user clicks on the arrows,

31            // stop the automatic slideshow

32            clearInterval(slideshow);

33        }

34    });

35

36    // Listen for clicks on the next arrow

37    $('.arrow.next').click(function(e){

38

39        e.preventDefault();

40

41        // The topmost element

42        var elem = $('#photos li:last');

43

44        // Apply a random exit animation

45        elem.addClass('animated')

46            .addClass( exits[Math.floor(exits.length*Math.random())] );

47

48        setTimeout(function(){

49

50            // Reset the classes

51            elem.attr('class','').prependTo(photos);

52

53            // The animation is complate!

54            // Allow clicks again:

55            ignoreClicks = false;

56

57        },1000);

58    });

59

60    // Listen for clicks on the previous arrow

61    $('.arrow.previous').click(function(e){

62

63        e.preventDefault();

64

65        // The bottom-most element

66        var elem = $('#photos li:first');

67

68        // Move the photo to the top, and

69        // apply a random entrance animation

70

71        elem.appendTo(photos)

72            .addClass('animated')

73            .addClass( entrances[Math.floor(entrances.length*Math.random())] );

74

75        setTimeout(function(){

76

77            // Remove the classess

78            elem.attr('class','');

79

80            // The animation is complate!

81            // Allow clicks again:

82            ignoreClicks = false;

83

84        },1000);

85    });

86

87    // Start an automatic slideshow

88    var slideshow = setInterval(function(){

89

90        // Simulate a click every 1.5 seconds

91        $('.arrow.next').trigger('click',[true]);

92

93    }, 1500);

94

95});

I haven’t used all the effects that animate.css provides, but you can find a full list at its github page.
All that we are left to do, is to write a few CSS styles.

The CSS

I won’t be showing all of the styles here, only those that are directly responsible for the photo stack:

assets/css/styles.css

01#photos{

02    margin:0 auto;

03    padding-top:120px;

04    width:450px;

05    position:relative;

06}

07

08#photos li{

09    position:absolute;

10    width:450px;

11    height:450px;

12    overflow:hidden;

13    background-color:#fff;

14    box-shadow: 1px 1px 1px #ccc;

15    z-index:10;

16

17    -webkit-animation-duration: 1s;

18    -moz-animation-duration: 1s;

19    animation-duration: 1s;

20}

21

22#photos li a{

23    position:absolute;

24    top:6px;

25    left:6px;

26    right:6px;

27    bottom:6px;

28    background-size: cover;

29    text-indent:-9999px;

30    overflow:hidden;

31}

To change the duration of the animations, you will have to supply the animation-duration property. In the fragment above, I have set it to 1 second. More properties that you can set are animation-delay for the delay before the animation is triggered, and animation-iteration-count for the number of repetitions.

by Martin Angelov
Source: http://tutorialzine.com/2013/02/animated-css3-photo-stack/

Friday, April 05, 2013