Foros del Web - Ver Mensaje Individual

Naahuel · #2 (**permalink**) 13/03/2012, 17:09

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<!doctype html>
<html>
<head>
<title>Efecto hover sobre letras con jQuery :: Nahuel Jos&eacute; :: jQuery - HTML - CSS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="efecto-hover.js"></script>
<style type="text/css">
    h1{
        color: black;
        font-size:40px;
    }
    h2{
        color: yellow;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    //con las opciones por defecto
    $('h1').efectoHover();
    
    //con opciones (se pueden especificar solo algunas si se quiere)
    $('h2').efectoHover({
        color: 'blue',
        velocidadIn: 'slow',
        velocidadOut: 'fast',
        cursor: 'default'
    });
});
</script>
 
</head>
<body>
<div>
    <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h1>
    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h1>
</div>
</body>
</html>

Y este es el código del plugin:

Código Javascript:

Ver original/*
Autor: Nahuel José
http://www.nahueljose.com.ar
*/
 
(function($){
    $.fn.efectoHover = function(opciones){
        //valores por defecto
        var defaults = {
            color: 'yellow',
            velocidadIn: 100,
            velocidadOut: 2000,
            cursor: 'pointer'
        };          
        var opciones = $.extend(defaults, opciones);
        $(this).each(function(){
            var textEff = $(this);
            var colorDef = textEff.css('color');
            var splitText = textEff.text().split('');
            for (var i=0; i<splitText.length; i++){
                if (splitText[i]==' '){continue;}
                splitText[i] = '<span class="hoverEffect">' + splitText[i] + '</span>';
            }
            nuevoHtml = splitText.join('');
            textEff.html(nuevoHtml);
            var letraEff = textEff.find('span.hoverEffect').css('cursor',opciones.cursor);
            letraEff.mouseenter(function(){
                $(this).stop().animate({
                    color: opciones.color
                }, opciones.velocidadIn);
            });
            letraEff.mouseout(function(){
                $(this).animate({
                    color: colorDef
                }, opciones.velocidadOut);
            });
        });     
        return false;
    };  
})(jQuery);

Mirá este otro ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //configuraciones
            var _elem = $('.animar-color');             //usar selector CSS para determinar los elementos a los que se aplica el efecto
            var _propiedadAAnimar = 'color'             //Propiedad CSS a la que quiero animar el color
            var _color_new = '#FFF000';                 //color al que quiero animar
            var _interval_ = 2000;                      //tiempo de cada parpadeo
            var _velocidad_ = 600;                      //duración de la animación (el doble de este valor debe ser menor al de _interval)
            //..
            var _color_org = _elem.css(_propiedadAAnimar);
            var animI = {};
            var animF = {};
            animI[_propiedadAAnimar] = _color_new;
            animF[_propiedadAAnimar] = _color_org;
            setInterval(function(){
                _elem.animate(animI,_velocidad_,function(){
                    _elem.animate(animF,_velocidad_);
                });
            },_interval_);
        });
    </script>
    <title>Efecto sobre letras</title>
</head>
<body>
    <h1 class="animar-color">Soy un texto</h1>
</body>
</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.