Algunos 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禄
En el ejemplo de este tutorial vamos a desvanecer links de una lista desordenada como se muestra en el ejemplo a continuaci贸n:
-
<ul id="links">
-
<li><a href="#">Some text here</a></li>
-
<li><a href="#">Some text here</a></li>
-
...
-
</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.
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.
-
$(document).ready(function() {
-
fadeElements("#000");
-
});
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禄
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.
-
function HexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }
-
function HexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }
-
function HexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }
-
function cutHex(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h }
-
[php]
-
-
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.
-
-
[php]
-
function fadeElements(color) {
-
var r = HexToR(color);
-
var g = HexToG(color);
-
var b = HexToB(color);
-
var valueR = parseInt(r + (stepR * i));
-
var valueG = parseInt(g + (stepG * i));
-
var valueB = parseInt(b + (stepB * i));
-
$(this).find("a").css("color", "rgb(" + valueR + "," + valueG + "," + valueB + ")");
-
});
-
}
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
Comentarios recientes
- Adriana: Por qu茅 si se puede usar vinagre? Seg煤n yo es 谩cido (d茅bil pero 谩ci...
- allison: me saco de apuros gracias ;)...
- Roden Miranda: Oye una pregunta, por que los peri贸dicos y las revistas cambiaron a los...
- dennis: super cool jajaja...
- Ram贸n: Normalmente, cuando alguien compra un CD 贸 DVD, se convierte en due帽o ...
- Jorge Morales: Hola amigo, yo tengo un tiempo en esto pero todo lo que he aprendido a s...
Feed de los comentarios