Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 530

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 611

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 728

Strict Standards: Redefining already defined constructor for class wpdb in /home/controlz/public_html/blog/wp-includes/wp-db.php on line 306

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-includes/cache.php on line 103

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/controlz/public_html/blog/wp-includes/cache.php on line 425

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-includes/theme.php on line 623

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /home/controlz/public_html/blog/wp-includes/class.wp-dependencies.php on line 15

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/controlz/public_html/blog/wp-settings.php:472) in /home/controlz/public_html/blog/wp-content/plugins/si-captcha-for-wordpress/si-captcha.php on line 31

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/controlz/public_html/blog/wp-settings.php:472) in /home/controlz/public_html/blog/wp-content/plugins/si-captcha-for-wordpress/si-captcha.php on line 31

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /home/controlz/public_html/blog/wp-includes/plugin.php on line 311
Fade In Text | formatic.cat

Entradas con la etiqueta ‘fade in text’

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

Viernes, 28 de Mayo de 2010

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/controlz/public_html/blog/wp-content/plugins/ig_syntax_hilite/geshi.php on line 2056

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.