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


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:

  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.

  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.

  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.

  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

Deja tu opinión

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