Ver Mensaje Individual
  #2 (permalink)  
Antiguo 13/03/2012, 17:09
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 14 años
Puntos: 192
Respuesta: Efecto sobre texto

Hola Isabel

Respecto a lo primero, te muestro un ejemplo que hice hace mucho. Usa jQuery + jQueryUI (este último necesario para hacer la transición de color):
http://nahueljose.com.ar/ejemplos/ef...as-con-jquery/

El efecto se hace al pasar el mouse sobre las letras.

Te dejo el código del ejemplo:
Código HTML:
Ver original
  1. <!doctype html>
  2. <title>Efecto hover sobre letras con jQuery :: Nahuel Jos&eacute; :: jQuery - HTML - CSS</title>
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  4. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
  5. <script type="text/javascript" src="efecto-hover.js"></script>
  6. <style type="text/css">
  7.     h1{
  8.         color: black;
  9.         font-size:40px;
  10.     }
  11.     h2{
  12.         color: yellow;
  13.     }
  14. <script type="text/javascript">
  15. $(document).ready(function(){
  16.     //con las opciones por defecto
  17.     $('h1').efectoHover();
  18.    
  19.     //con opciones (se pueden especificar solo algunas si se quiere)
  20.     $('h2').efectoHover({
  21.         color: 'blue',
  22.         velocidadIn: 'slow',
  23.         velocidadOut: 'fast',
  24.         cursor: 'default'
  25.     });
  26. });
  27.  
  28. </head>
  29. <div>
  30.     <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h1>
  31.     <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h1>
  32. </div>
  33. </body>
  34. </html>

Y este es el código del plugin:
Código Javascript:
Ver original
  1. /*
  2. Autor: Nahuel José
  3. http://www.nahueljose.com.ar
  4. */
  5.  
  6. (function($){
  7.     $.fn.efectoHover = function(opciones){
  8.         //valores por defecto
  9.         var defaults = {
  10.             color: 'yellow',
  11.             velocidadIn: 100,
  12.             velocidadOut: 2000,
  13.             cursor: 'pointer'
  14.         };         
  15.         var opciones = $.extend(defaults, opciones);
  16.         $(this).each(function(){
  17.             var textEff = $(this);
  18.             var colorDef = textEff.css('color');
  19.             var splitText = textEff.text().split('');
  20.             for (var i=0; i<splitText.length; i++){
  21.                 if (splitText[i]==' '){continue;}
  22.                 splitText[i] = '<span class="hoverEffect">' + splitText[i] + '</span>';
  23.             }
  24.             nuevoHtml = splitText.join('');
  25.             textEff.html(nuevoHtml);
  26.             var letraEff = textEff.find('span.hoverEffect').css('cursor',opciones.cursor);
  27.             letraEff.mouseenter(function(){
  28.                 $(this).stop().animate({
  29.                     color: opciones.color
  30.                 }, opciones.velocidadIn);
  31.             });
  32.             letraEff.mouseout(function(){
  33.                 $(this).animate({
  34.                     color: colorDef
  35.                 }, opciones.velocidadOut);
  36.             });
  37.         });    
  38.         return false;
  39.     }; 
  40. })(jQuery);

Mirá este otro ejemplo:
Código HTML:
Ver original
  1. <!doctype html>
  2.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  3.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  4.     <script type="text/javascript">
  5.         $(function(){
  6.             //configuraciones
  7.             var _elem = $('.animar-color');             //usar selector CSS para determinar los elementos a los que se aplica el efecto
  8.             var _propiedadAAnimar = 'color'             //Propiedad CSS a la que quiero animar el color
  9.             var _color_new = '#FFF000';                 //color al que quiero animar
  10.             var _interval_ = 2000;                      //tiempo de cada parpadeo
  11.             var _velocidad_ = 600;                      //duración de la animación (el doble de este valor debe ser menor al de _interval)
  12.             //..
  13.             var _color_org = _elem.css(_propiedadAAnimar);
  14.             var animI = {};
  15.             var animF = {};
  16.             animI[_propiedadAAnimar] = _color_new;
  17.             animF[_propiedadAAnimar] = _color_org;
  18.             setInterval(function(){
  19.                 _elem.animate(animI,_velocidad_,function(){
  20.                     _elem.animate(animF,_velocidad_);
  21.                 });
  22.             },_interval_);
  23.         });
  24.     </script>
  25.     <title>Efecto sobre letras</title>
  26. </head>
  27.     <h1 class="animar-color">Soy un texto</h1>
  28. </body>
  29. </html>

La diferencia es que anima cualquier cosa! Pero no letra por letra, eso lo hace el plugin anterior. Pero con el último ejemplo podés animar cualquier cosa que tenga color. El fondo de un div, bordes, texto, etc.
__________________
nahueljose.com.ar