jquery efecto desvanecimiento texto (fade in text, fade out texto)
Viernes, 28 de Mayo de 2010En jQuery es fácil encontrar cualquier efecto de desvanecimiento - fade, fade in, fade out - pero casi todos estan orientados a hacer galerías de imagenes, me ha costado encontrar algo que funcione correctamente con solo texto. Esto es, un pase de diapositivas de información (no imagen).
Los ejemplos de utilización para imágenes no los voy a describir ya que son fáciles de encontrar y no me interesan en este momento, voy a explicar directamente como hacer el fade con textos:
jQuery
Usaremos el framework jQuery:
http://code.jquery.com/jquery-latest.pack.js
jQuery cycle
Complementamos jQuery con la extensión 'cycle':
http://jquery.malsup.com/cycle/
Código
-
$(function () {
-
var $container = $('#informacion'),
-
-
quotes = [
-
{fecha: '10 FEBRER 2010', titulo: 'Inauguració oficines SOC a Badalona'},
-
{fecha: '05 MAIG 2010', titulo: 'Notícia nº1'},
-
];
-
-
$(quotes).each(function (i) {
-
var quote = '<span>' + this.fecha + '</span> - <span>' + this.titulo + </span>';
-
$container.append('
-
<div>
-
-
' + quote + '</div>
-
');
-
});
-
$container.cycle({
-
speed: '2000',
-
timeout: '10000',//1000=1seg
-
cleartype: '1' // activar correcciones cleartype
-
});
-
});
Explicación
La variable container es el elemento que va a contener la información que queremos rotat. En mi caso:
Se crea el array 'quotes', que es el que contendrá la información que vamos a rotar, mi caso:
Posición N[fecha='',titulo='']
La manera en la que se mostrara se puede modificar en la linea:
var quote = '' + this.fecha + ' - ' + this.titulo + ';
En nuestro ejemplo pondra la fecha entre 'span' un guion separador y el titulo entre 'span' de nuevo.
Ejemplo
Podéis ver un ejemplo en funcionamiento en www.agparquitectes.com, en la sección de inicio, en el pie.