Efecto sobre texto

isabelramirezmontoya · #1 (**permalink**) 13/03/2012, 15:09

Buenas tardes

Me pueden colaborar con lo siguiente por favor, he intentado varias cosas pero no doy con la idea.

Como puedo generar los siguientes efectos en un texto:

1. Tengo un texto fijo de color verde como puedo hacer para que el color cambie de tono o color despues de un tiempo.

2. Tengo una frase que necesito que aparezca letra por letra, cuando la frase se complete, que no se repita el efecto.

Gracias por su tiempo

Isabel

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.

Naahuel · #3 (**permalink**) 13/03/2012, 17:35

Respecto a lo segundo, hice un ejemplo rápido para ver cómo se podría lograr :) Me pareció interesante.

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">
    $(function(){
        //configuraciones
        var _elem       = $('.animar-entrada');     //usar selector CSS para determinar los elementos a los que se aplica el efecto
        var _velocidad  = 400;                      //duración de la animación
        var _demora     = 200;                      //pausa entre cada letra
        //..
        _elem.each(function(){
            //acciones para cada elemento seleccionado
            var $esto = $(this);
            var arr_letras = $esto.text().split('');    //dividir el texto letra por letra
            $esto.html('');                             //vaciar el html del elemento
            for (var i=0; i<arr_letras.length; i++){    //encerrar cada letra en un <span> con clase especial, solo para identificarla
                arr_letras[i] = $('<span class="jq-letra">' + arr_letras[i] + '</span>').hide();    //crear el elemento y ocultarlo
                $esto.append(arr_letras[i]);                                                        //agregar elemento al texto
                arr_letras[i].delay( i * _demora ).fadeIn(_velocidad);                              //mostrar letra con efecto
            }
        });
    });
    </script>
    <title>Efecto sobre letras</title>
</head>
<body>
    <h1 class="animar-entrada">Soy un texto</h1>
    <h2 class="animar-entrada">Yo tambi&eacute;n tengo la entrada animada</h2>
</body>
</html>

El script es sencillo, aunque tal vez un poco absorbe CPU, así que yo no usaría textos demasiado largos, sin mencionar que es un poco molesto leer de esa forma.

Jugá con los valores de velocidad y demora para lograr otros efectos.

isabelramirezmontoya · #4 (**permalink**) 14/03/2012, 15:50

Muchas gracias por tu tiempo los voy a probar y a adaptarlos a mi codigo

Gracias

Chaoo..