En este tutorial, vamos a desarrollar un álbum de fotos animado, que utilizará todo tipo de efectos fantásticos para hacer las transiciones entre las distintas imágenes. Los efectos se aplicarán exclusivamente utilizando CSS3, lo que significa que funcionará sin problemas en todos los navegadores modernos y dispositivos móviles. También vamos a hacer que el avance entre las diferentes fotos del álbum sea automático, por lo que podemos utilizarlo como una slideshow sin problema alguno.
El HTML
Como siempre, el primer paso crear el diseño del ejemplo. Empezamos con un documento normal de HTML5 en el qvamos a incluir una serie de archivos CSS y JS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Album de fotos animado</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 ul #photos contiene las fotos que más tarde animaremos. Para cada foto, he definido un elemento li con un elemento anchor en su interior. La imagen la estableceremos con la propiedad background-imagen del enlace. Como verás en la parte CSS, estoy utilizando la propiedad background-size para obligar a la imagen a cubrir todo el ancho y alto del enlace. Al añadir más fotos, ten en cuenta que, debido a que están posicionados de forma absoluta, se mostrarán en orden inverso (la última foto estará en la portada).
En la head del documento, incluyo nuestra principal hoja de estilo y animate.css, la librería que nos brinda esas animaciones de CSS3 tan maravillosas. Antes de que cerrar la etiqueta del body, tenemos la biblioteca jQuery y el script.js del que hablaremos a continuación.
El JavaScript
Para disparar los efectos que la librería animate nos brinda, tenemos que asignar el nombre de clase al elemento con el nombre específico de la animación. También tenemos que mover la fotografía de la parte inferior de la pila después de que finalice la animación, para así mostrar la siguiente imagen. Esto es lo que tenemos que hacer con el fin de que este ejemplo funcione:
- En primer lugar, vamos a detectar los clics de las flechas;
- Después, cuando se haga clic en la flecha de siguiente, se disparará una animación CSS de las establecidas de forma aleatoria elegido al azar asignándole el nombre de la clase al elemento superior de la pila (en realidad es el último elemento li debido al posicionamiento)
- Después de un segundo, cuando la animación haya terminado, movemos el elemento animado antes que los otros lis con el método jQuery prependTo (esto lo empujará a la parte inferior de la pila) y retiro los nombres de clases que hemos asignado antes.
- Para la flecha anterior, vamos a hacer casi lo mismo, con la única diferencia de que vamos a tomar la última imagen y la vamos a colocar en la parte superior de la pila antes de activar la animación.
Además, también voy a agregar una funcionalidad de auto-avance. Esto convertirá al ejemplo en un slideshow molón que parará las transiciones automatizadas cuando hagas clic en una de las flechas.
El código para ello es el siguiente:
$(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 he utilizado todos los efectos que nos proporciona animate.css, pero puedes encontrar una lista completa en su página de GitHub.
Todo lo que nos queda por hacer, es escribir un par de estilos CSS.
El CSS
No voy a mostrar todos los estilos aquí, sólo aquellos que están directamente relacionados con el álbum de fotos:
#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 hacer uso de la propiedad animation-duration. En el código anterior, lo he puesto a 1 segundo. Más propiedades que puedes establecer son el animation-delay para el retardo antes de que se active la animación y el animation-iteration-count para el número de repeticiones.
Fuente: tutorialzine.com