Clicky

Presentación de diapositivas animada con CSS3

pila de fotos animadas

Pila de fotos animada con efectos de fantasía

En este tutorial vamos a construir una pila de fotos animada que utilizará todo tipo de efectos de fantasía para la transición entre un conjunto de imágenes. Los efectos se aplican exclusivamente con CSS3, lo que significa que funcionan sin problemas en los navegadores modernos y dispositivos móviles. También vamos a hacer automáticamente el avance de la pila de fotos, por lo que podemos usarla como una presentación de diapositivas.

El HTML

Como siempre, el primer paso es presentar el formato del ejemplo. Estamos comenzando con un documento regular HTML5 en el que incluimos una serie de archivos CSS/JS:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Pila de fotos animada | Somos apañados 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>

El "photos" de ul contiene las imágenes que vamos a animar. Para cada foto se ha definido un elemento li con un elemento de anclaje <a> en su interior. La imagen se establece como la propiedad background-image del enlace. Como se verá en la parte CSS, se ha usado la propiedad background-size  para forzar que la imagen cubra toda la anchura y la altura del enlace. Al añadir más fotos hay que tener en cuenta que, debido a que están posicionadas absolutamente, se muestran en orden inverso (la última foto estará en la parte superior).

En la sección de encabezado del documento, se ha incluíso la hoja de estilo principal y animate.css - la biblioteca que nos da esas maravillosas animaciones CSS3. Antes del cierre de la etiqueta body, tenemos la biblioteca script.js que vamos a explicar a continuación junto jQuery.

pila de fotos animadas - demo

El JavaScript

Para activar los efectos que nos da la biblioteca animada tenemos que asignar un nombre de clase para el elemento con el nombre de la animación. También vamos a tener que mover la foto animada en la parte inferior de la pila una vez finalizada la animación, por lo que podemos mostrar la imagen siguiente. Esto es lo que tenemos que hacer para que este ejemplo funcione:

•  En primer lugar, vamos a escuchar por los clics en las flechas;

•  Entonces, cuando ocurre un clic en la flecha siguiente, vamos a desencadenar una animación CSS elegida al azar mediante la asignación de un nombre de clase para el elemento superior de la pila (esto es en realidad la última imagen debido a la colocación li);

•  Después de un segundo, cuando la animación se completa, vamos a mover el elemento animado antes que los otros li con el método prependTo jQuery (esto empujará a la parte inferior de la pila) y quitar las clases que hemos asignado anteriormente.

•  Para la flecha anterior, vamos a hacer casi lo mismo, con la única diferencia de que vamos a tomar la última imagen y colocarla en la parte superior de la pila antes de activar la animación.

Además, también se añaden funciones de avance automático. Esto produce una divertida presentación para las transiciones automáticas al hacer clic en una de las flechas.

El código se ve así:

assets/js/script.js

$(function() {

    var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown',
        'hinge', 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft',
        'lightSpeedOut', 'rollOut'];

    var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight',
            'rotateIn', 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown'];

    var photos = $('#photos'),
        ignoreClicks = false;

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

            // If clicks on the arrows should be ignored,
            // stop the event from triggering the rest
            // of the handlers

            e.stopImmediatePropagation();
            return false;
        }

        // Otherwise allow this click to proceed,
        // but raise the ignoreClicks flag

        ignoreClicks = true;

        if(!simulated){
            // Once the user clicks on the arrows,
            // stop the automatic slideshow
            clearInterval(slideshow);
        }
    });

    // Listen for clicks on the next arrow
    $('.arrow.next').click(function(e){

        e.preventDefault();

        // The topmost element
        var elem = $('#photos li:last');

        // Apply a random exit animation
        elem.addClass('animated')
            .addClass( exits[Math.floor(exits.length*Math.random())] );

        setTimeout(function(){

            // Reset the classes
            elem.attr('class','').prependTo(photos);

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        },1000);
    });

    // Listen for clicks on the previous arrow
    $('.arrow.previous').click(function(e){

        e.preventDefault();

        // The bottom-most element
        var elem = $('#photos li:first');

        // Move the photo to the top, and
        // apply a random entrance animation

        elem.appendTo(photos)
            .addClass('animated')
            .addClass( entrances[Math.floor(entrances.length*Math.random())] );

        setTimeout(function(){

            // Remove the classess
            elem.attr('class','');

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        },1000);
    });

    // Start an automatic slideshow
    var slideshow = setInterval(function(){

        // Simulate a click every 1.5 seconds
        $('.arrow.next').trigger('click',[true]);

    }, 1500);

});

No se han utilizado todos los efectos que proporciona animate.css, pero puedes encontrar una lista completa en la página de GitHubpágina de GitHub.

Todo lo que nos queda por hacer es escribir algunos estilos CSS.

El CSS

Aquí no voy mostrar todos los estilos, sólo aquellos que son directamente responsables de la colección de fotos:

assets/css/styles.css

#photos{
    margin:0 auto;
    padding-top:120px;
    width:450px;
    position:relative;
}

#photos li{
    position:absolute;
    width:450px;
    height:450px;
    overflow:hidden;
    background-color:#fff;
    box-shadow: 1px 1px 1px #ccc;
    z-index:10;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

#photos li a{
    position:absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    background-size: cover;
    text-indent:-9999px;
    overflow:hidden;
}


Para cambiar la duración de las animaciones tendrás que cambiar la propiedad animation-duration. En el fragmento anterior, se ha puesto a 1 segundo. Más propiedades que se pueden establecer, son animation-delay para el retraso antes de activar la animación y la animation-iteration-count para el contador de número de repeticiones.

¡Ya está!

Este efecto chimenea de fotos animadas esta acabado. Puedes utilizar este ejemplo como una ligera presentación que funciona sin problemas, incluso en dispositivos móviles.

Puedes descargar los archivos de la demostración aquí.

Jesus_Caceres