Entradas con la etiqueta ‘fade in text’

jquery efecto desvanecimiento texto (fade in text, fade out texto)

Viernes, 28 de Mayo de 2010

En 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

JavaScript:
  1. $(function () {
  2. var $container = $('#informacion'),
  3.  
  4. quotes = [
  5. {fecha: '10 FEBRER 2010', titulo: 'Inauguració oficines SOC a Badalona'},
  6. {fecha: '05 MAIG 2010', titulo: 'Notícia nº1'},
  7. ];
  8.  
  9. $(quotes).each(function (i) {
  10. var quote = '<span>' + this.fecha + '</span> - <span>' + this.titulo + </span>';
  11. $container.append('
  12. <div>
  13.  
  14. ' + quote + '</div>
  15. ');
  16. });
  17. $container.cycle({
  18. speed: '2000',
  19. timeout: '10000',//1000=1seg
  20. cleartype: '1' // activar correcciones cleartype
  21. });
  22. });

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.