Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

miércoles, 9 de mayo de 2012

Reemplazando a Flash – curso de animación con jQuery


Hoy voy a empezar con algo de lo que últimamente se está hablando bastante en la red, pero que aún no se está llevando demasiado a la práctica: las alternativas a Flash usando Javascript. Supongo que, si todavía no se ha extendido demasiado el uso de JS, es por la “mala fama” que se ha ido generando: al haber una gran multitud de plataformas que lo soportan, pero todas en distinto grado de soporte, da algo de miedo tener que adaptar las aplicaciones a cada navegador.

Pero, por suerte, hay herramientas que nos ahorran este tedioso trabajo de adaptación y comprobación, reduciendo las aburridas tareas antiguas a un simple vistazo para ver que todo funciona a la perfección.

Y por esto he decidido empezar este curso, para demostrar que jQuery y Javascript pueden ser muy buenas alternativas al uso de Flash.

Empezamos...

Como primera práctica del curso, empezaremos con algo relativamente sencillo, un banner animado. De tamaño estándar (o, al menos, el que con el uso de Flash se ha ido estandarizando), es decir, 468x60.

Para realizarlo, solo un par de cosas. Necesitaremos tres fotos, del tamaño que queráis, pero si son más anchas que el banner, tardarán en cargar. Lógicamente, también usaremos nuestro programa de edición de código habitual (en mi caso Sublime Text 2) para generar los tres archivos (uno HTML, uno CSS y uno JS) y el código fuente de jQuery.

En primer lugar, crearemos esta estructura de archivos en nuestra carpeta de proyectos:

  • jquery_banner (carpeta)
    • index.html
    • assets (carpeta)
      • banner.css
      • banner.js
    • img (carpeta)

Dentro de la carpeta img guardaremos nuestras tres imágenes, a ser posible, con formato *.jpg y numeradas del 1 al 3 por nombre de archivo.

Abrimos el archivo index.html y escribimos el siguiente código:

<!doctype html>
<html>

<head>

<title>Banner con jQuery - reemplazando a Flash</title>

<link rel="stylesheet" href="assets/banner.css" media="all"/>

<script src="assets/jquery-1.7.2.min.js"></script>
<script src="assets/banner.js"></script>

</head>

<body>

<div class="banner" id="my_banner">

<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>

</div>

</body>

</html>

Como veis, nos hemos descargado la versión comprimida de jQuery en la carpeta assets y hemos incluido ya nuestros archivos. Ahora pasamos a ver los estilos css:

.banner {
height:60px;
width:468px;
overflow:hidden;
}

.banner>img {
position:relative;
top:0px;
width:100%;
display:none;
}

.banner>img:first-child{
display:inline;
}

/*

OPCIONAL: un borde redondeado para nuestro banner

.banner, .banner>img {
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}*/

En el archivo css hemos definido el tamaño de nuestro banner, así como los diferentes estilos para que se vean bien las imágenes. Como veis, también hemos añadido (como comentario, es decir, no hará efecto) un borde redondeado, para que combine bien con el estilo de la web, si conviene.

Finalmente, aquí tenemos el código Javascript. Se podría mejorar bastante, pues se usan demasiadas funciones, pero creo que así se verá mejor el mecanismo de repetición.

$(document).ready(function(){

var frame = $('.banner'),
images = frame.children(),
p1 = $(images[0]),
p2 = $(images[1]),
p3 = $(images[2]),

animate1 = function(){
p3.css({top:'0px'});
p1.fadeIn(2000);

p1.animate({
/*introducir aqui los píxeles de alto de la imagen*/
top:(-351
+60)+'px'
},10000,function(){
p1.fadeToggle(1000,animate2);
});
},

animate2 = function(){
p1.css({top:'0px'});
p2.fadeToggle(2000);

p2.animate({
/*introducir aqui los píxeles de alto de la imagen*/
top:(-351
+60)+'px'
},10000,function(){
p2.fadeToggle(1000,animate3);
});
},

animate3 = function(){
p2.css({top:'0px'});
p3.fadeToggle(2000);

p3.animate({
/*introducir aqui los píxeles de alto de la imagen*/
top:(-351
+60)+'px'
},10000,function(){
p3.fadeToggle(1000,animate1);
});
};

animate1();

});

Eso es todo, espero que os sea útil. Próximamente trabajaremos efectos más avanzados (también con jQuery), y pasaros dentro de poco para ver el nuevo script de buscador instantáneo (también en Javascript) que estoy preparando.

Un saludo!






© 2012 Enric Florit (3nr1c)

No hay comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...