Micaela 21 de Octubre de 2009 a las 11.30
   Imprimir artículo
elWebmaster.com

Cómo dar un efecto de “desvanecimiento” a tus links con jQuery

CSS, color, link, efecto, jQuery, Diseño Gráfico, enlace, RGB, transparencia, opacidad

jqueryAlgunos sitios web poseen un lindo efecto en el pie de página, que hace que los links en la parte inferior de una lista se desvanezcan, haciendo énfasis por medio de la intensidad del color en los links más importantes.

En esta nota, te daremos una pequeña guía con la que podrás fundir un color en una serie de elementos utilizando jQuery. También podrás ver como valerte de CSS para lograr el mismo efecto con menos código.

Descarga aquí el código fuente»

Visualiza el demo aquí»

En el ejemplo de este tutorial vamos a desvanecer links de una lista desordenada como se muestra en el ejemplo a continuación:

PLAIN TEXT
  1. <ul id="links">
  2.     <li><a href="#">Some text here</a></li>
  3.     <li><a href="#">Some text here</a></li>
  4.     ...
  5. </ul>

Fundir links utilizando la propiedad de opacidad

En el primero ejemplo, usaremos la propiedad opacidad (opacity) de CSS y aplicaremos distintos niveles de opacidad a cada link de la lista desordenada. Para hacer esto necesitamos dos variables: el número de links y el número que determinará el paso para que la opacidad disminuya. En el código podrán ver que para el paso determinante, dividimos 90 por la cantidad de links. Esto significa que el ultimo link será 90% transparente. Si dividieramos 100 con la cantidad de links, el último enlace sería completamente transparente, es decir, invisible.

PLAIN TEXT
  1. function fadeElements(color) {
  2.     var count = $("ul#links li").size();
  3.     var step = 90 / count;
  4.     $("ul#links li").each(function(i) {
  5.         var currentOpacity = 100 - (step * i);
  6.         $(this).find("a").css("color", color)
  7.             .css("opacity", currentOpacity = 100 ? "1" : "0." + parseInt(currentOpacity));
  8.     });
  9. }

A continuación, determinamos la intensidad de la opacidad para cada link (currentOpacity) y a asignamos a través de CSS, junto con el color seleccionado (el cuál se pasa a la función por medio de parámetro). Noten que se utiliza la declaración "if" para asignar el valor de opacidad 1 si se trata del primer link, y menos que uno para todos los demás.

PLAIN TEXT
  1. $(document).ready(function() {
  2.     fadeElements("#000");
  3. });

Luego puedes llamar a la función fadeElements y pasarle el color que deseas que se funda. En el ejemplo de arriba es negro.

Fundir links utilizando valores RGB

Descarga aquí el código fuente»

Visualiza el demo aquí»

Si por alguna razón no deseas utilizar opacidad, aquí está la versión complicada: utilizar valores RGB. Las primeras cuatro funciones del código que sigue convierten valores de color Hex en valores rojo, verde y azul.

PLAIN TEXT
  1. function HexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }
  2. function HexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }
  3. function HexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }
  4. function cutHex(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h }
  5. [php]
  6.  
  7. La función fadeElements que hemos visto antes en el tutorial, es ahora un poco más complicada. Básicamente, realiza el mismo trabajo, es decir, desvanece colores. Sólo que está vez no hará que un color sea transparente sino que escalará el color original y tendrá como resultado distintas variaciones.
  8.  
  9. [php]
  10. function fadeElements(color) {
  11.     var count = $("ul#links li").size();
  12.     var r = HexToR(color);
  13.     var g = HexToG(color);
  14.     var b = HexToB(color);
  15.     var stepR = (230 - r) / count;
  16.     var stepG = (230 - g) / count;
  17.     var stepB = (230 - b) / count;
  18.     $("ul#links li").each(function(i) {
  19.         var valueR = parseInt(r + (stepR * i));
  20.         var valueG = parseInt(g + (stepG * i));
  21.         var valueB = parseInt(b + (stepB * i));
  22.         $(this).find("a").css("color", "rgb(" + valueR + "," + valueG + "," + valueB + ")");
  23.     });
  24. }

La lógica es similar al primer ejemplo. También determinamos la cantidad de links y la cantidad de decrecimiento de los valores rojo, verde y azul para cada uno de estos. El número 230 es 90% de 255 el cual representa el valor más alto de un color en el modelo RGB. Luego, para cada link creamos el color haciendo que disminuyan los valores rojo, verde y azul del color original. No suena tan complicado ¿Verdad?

Fuente: Janko at Warp Speed

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión