Al realizar una Web, muchas veces se nos plantea la posibilidad de dotarla de una pequeña animación o efecto visual para mostrar u ocultar una capa o textos. La librería jQuery, entre sus muchas posibilidades, ofrece una forma sencilla de programar una animación sin tener que escribir muchas líneas engorrosas de código en JavaScript.
Como ejemplo, aquí os pongo el código para incluir un texto rotativo encajado en una capa (DIV). Es un código muy simple y que permite crear animaciones de texto y/o imágenes, que bien podría ser utilizado para un sistema de banners, de mensajería o de ayuda.
Código JavaScript:
<div id=»texto»></div>
var textos=new Array();
textos[0]=’Esto es una animación de texto’;
textos[1]=’realizada con la librería jQuery’;
textos[2]=’que permite código <span style=»color: red;»>H</span><span style=»color: blue;»>T</span><span style=»color: orange;»>M</span><span style=»color: green;»>L</span>’;
textos[3]='<b>:-)</b>’;
var idCnt=0;
function animacion() {
jQuery(‘#texto’).html(textos[idCnt]).fadeIn(500).delay(1500).fadeOut(300);
idCnt=idCnt+1;
if (idCnt>=textos.length) idCnt=0;
setTimeout(‘animacion()’,3000);
}
animacion();
como podría tener un link diferente cada enlace?
Este ejemplo es muy sencillo. Hay muchas maneras de tener enlaces en animaciones, como capas que se ocultan y se muestran.
Pero en este caso, dos soluciones rápidas que se me ocurren serían:
1.- Incluir el enlace HTML directamente en cada valor del array textos, con lo que quedaría así:
textos[0]='Esto es una animación de texto con enlace'
2.- Dar la propiedad onclick utilizando el propio jQuery, dentro de la función de animación:
jQuery('#'+obj).html(textos[idCnt]).fadeIn(500).delay(1500).fadeOut(300);
jQuery('#'+obj).click(function() { alert('Se pulsa un enlace'); document.location=»url del enlace»; });
Son sólo unos ejemplos de cómo podría hacerse en este caso.