JMiur [E]

Otro de los pequeños scripts de leigeber se llama fader y con él podemos agregar transiciones de color en los fondos, textos y bordes de los elementos. Hasta donde pude ver, funciona bien en IE, Firefox, Opera y Safari.

Descargamos este ZIP y allí encontraremos un demo y el archivo fader.js que es el único que necesitamos. Luego, lo subimos a un servidor y lo agregamos a al plantilla antes de </head>:
<script type="text/javascript" src="URL_fader.js"></script>
Aunque, como es muy pequeño y sencillo, también podemos agregarlo directamente. Para eso, también antes de </head>, escribimos el código para contenerlo, abrimos el archivo fader.js con el block de notas, copiamos su contenido y lo pegamos donde se indica:
<script type='text/javascript'>
// <![CDATA[
// aquí pegamos el contenido del archivo
// ]]>
</script>
Para usarlo sólo necesitamos una función que agregaremos a cualquier evento como onMouseOver, onMouseOut u onClick:

colorFade('nombreID','tipo','colorInicial','colorFinal',valor1,valor2)

Donde:

nombreID es el atributo ID del elemento sobre el que vamos a efectuar el efecto
tipo es el efecto que vamos a aplicar (background, border o text)
colorInicial y colorFinal son los valores de los colores, el primero es el color con que se iniciará el efecto y el segundo con el que finalizará y deben ser escritos en hexadecimal pero sin el carácter #
valor1 es la cantidad de veces que se dividirá la diferencia de colores, un valor alto hace que se muestren muchos colores intermedios (es opcional)
valor2 es la velocidad del efecto y, cuanto más alto sea, más lento se producirá (es opcional)

Veamos un ejemplo concreto:
<div 
style="background-color:#000000;cursor:pointer;"
id="ejemploF1"
onmouseover="colorFade('ejemploF1','background','000000','FF0000')"
onmouseout="colorFade('ejemploF1','background','FF0000','000000',25,50)">
... el contenido del bloque ...
</div>
Tengo un bloque DIV con un color de fondo negro (000000). Al pasar el cursor del mouse encima (onmouseover), el color de fondo cambia a rojo (FF0000); al quitar el cursor de encima (onmouseout) el color vuelve a ser negro y en ambos casos, esa transición se hace pasando por varios colores intermedios. Si en onmouseover no coloqué valores y onmouseout sí, sólo es para mostar que esos valores son opcionales.

... el contenido del bloque ...

Algunos ejemplos más.

Usando transiciones de color en el fondo de un DIV con el evento onmouseover; de manera similar al anterior:

EJEMPLO 1
EJEMPLO 2
EJEMPLO 3

También podemos usar el evento onClick, tanto dentro del elemento como afuera, por ejemplo, estos enlaces hacen que se produzca el efecto sobre los bloques de abajo:


Ejemplo 4
Ejemplo 5
Ejemplo 6

En todos ellos, el tipo de efecto se produce sobre el color del fondo (background) pero, también podemos hacerlo sobre el color de los textos, en ese caso, el tipo a colocar es text:

Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Ut wisi enim ad minim veniam.

Y también podemos hacerlo con los bordes usando el tipo border:

EJEMPLO 10
EJEMPLO 11
EJEMPLO 12

Hasta acá son todos elementos DIV pero, puede usarse prácticamente cualquier etiqueta HTML siempre que le coloquemos un atributo ID. Por ejemplo, esta es una tabla:

Celda 1Celda 2Celda 3Celda 4

Y este es un enlace a ninguna parte.

23 comentarios:

shakaran  

Muy útil el script. Combinado con Mootools (o incluso migrado a Mootools) puede ser aun mas espectacular.

PD: En el rss las letras en verde, rojo, amarillo, azul, etc se ven fatal y no invita nada a leerlo ademas de parecer muy "web 1.0".

Si no es mucha molestia podrías intentar arreglarlo? Gracias

También estaría bien que los comentarios fueran en la propia pagina de la entrada y no en un popup o cargando otra página (no se si se podrá modificar en Blogger).

Responder
Gem@  

Tocado y hundido, quiero decir que tengo que probarlo ya mismo ;)

Responder
JMiur  

shakaran:
Veré lo del RSS. No es tan sencillo hacerlo. Los comentarios son manejados por Blogger así que no es mucho lo que se puede hacer con ellos.

Gem@:
Vaya y pruebe, no es nada del otro mundo pero sobre los fondos puede ser un detalle divertido :)

Responder
→ sharys'ce  

bastate chido el efecto, boy a aplicarlo esta muy interesate, gracias por compartilo....un saludote

Responder
paola monti  

excelente!!
gracias.

Responder
LacraX07  

Muy bueno , tambien podriamos usarlo para hacer que se aclaresca un texto de color gris y pasarlo a blanco o negro a blanco , gracias por el dato y si me acurdo lo pruebo.

Responder
→ sharys'ce  

Hola de nuevo, JMiur: quisiera compartir el efecto que logre, lo logre aplicarlo como menu y el resultado quedo padre, en mi blog se puede ver...solo tuve que agregar el evento onclick para enlazar el menu a la pagina que queramos...

se agrega esto:
onclick="javascript:window.open('http://sharysce.blogspot.com','_parent');"

un saludote.

Responder
Catx  

Primero de todo, enhorabuena por el trabajo que estas desempeñando dia a dia en este blog, lleno de contenido interesante y traspasando barreras en el mundo blogger.

Y segundo, te entrego el premio "Brillante Weblog" que pulula por la red, ya que considero que tu blog es de alto interés para todos. Felicidades!. Puedes ver el post en mi blog:

www.catx.km6.net

Nos vemos!!!

Responder
JMiur  

Saludos, Paola

LacraX: Espero que te "inspires" :D

Excelente, sharys'ce, acabo de verlo :)

Muchas gracias Catx. No suelo hacer referencias a esos temas pero, los considero un honor y los agradezco de corazón. Sinceramente, no estoy acostumbrado a tanto halago :$

Responder
YoJimena  

Me encanto ! en cuanto tenga un rato para probarlo lo agrego. Total, que le hace una mancha mas al tigre ! ajajajajja

Responder
JMiur  

Suerte YoJimena :)

Responder
La Blogueria  

Hola JMiur, ay dios lo he visto lo he probado y ahora ya no sé qué será de mi blog; probablemente se convierta en un espanto por el que no podrás pasar el mouse sin sufrir un ataque de epilepsia o dos.

Y todo por tu culpa.

Responder
La Blogueria  

Con respecto al comentario de Shakaran sobre el RSS, cierto es... pero yo sugeriría el camino contrario: pincha en el enlace y lee sobre el blog si el artículo ha captado tu atención. Tiene más sentido que cambiar la estética usada (aunque ojo que buena razón hay en pensar que debiéramos adaptarnos al feed, dado el uso). Pero algo me incita a animar más a lo primero que a lo segundo.

¡Y como truco SEO tiene utilidad! Ponemos los títulos en negro y las partes más interesantes en amarillo: redirigimos (tiránicamente) a los lectores al blog, sí o sí :D

Yo uso el feed para orientarme entre lo que deseo leer, echo un vistazo rápido a los nuevos feeds y lo que más me interesa lo leo in situ siempre.

Quería romper una pequeña lanza a favor de una estética más personal, sea cual sea, y en contra de la unificación y alienación del negro sobre blanco. No admitiría otra cosa en un libro impreso, pero sí en los blogs.

¡Saludos a todos!

Responder
Mar  

Ah....... me encantó!
Gracias Jmiur.

Ya descargo y pruebo.

Que tengas buen día

Responder
YoJimena  

Ufa =(
tengo un html tan rebuscado que solo lo logre con el primer separador de la barra del costado. Con el resto no hay caso !!! buuuuuuuuuuuuuuu

Responder
JMiur  

Paciencia, YoJimena, paciencia y, cualquier cosa, mándame un mail si es que hay algún detalle que no consigues resolver.

Mar: suerte :D

La Blogueria: mientras no quites las lechuzas, nada importa ;)

Por cierto, amiga, suscribo cada una de tus palabras respecto a los feeds. Son un extraordinario recurso pero no es lo mismo que entrar en el sitio. Personalmente, salvo caso especiales, no los uso para leer sino sólo para saber dónde voy a ingresar.

Técnicamente, tampoco es posible igualarlos ya que cada uno interpreta las páginas a su manera, algunos leen colores y fondos, otros no (lo que es más lógico).

Concuerdo contigo, no creo que debamos limitarnos estéticamente y todo experimento es bienvenido.

Responder
Gabriel  

¿Hay alguna forma de agregar este efecto a TODOS los links de una plantilla?. Estimo que el efecto se debe colocar en a:hover en la parte de Links, pero no logro entender como sería eso.
Si me pueden decir como se hace, se los agradezco.
Saludos.

Responder
JMiur  

No de esa forma. Tal vez, creando un script nuevo pero es algo que me excede.

Responder
Astro  

wow.. exelente exelente me parece esto. ya lo tengo listo y funcionando en mi pagina web y se ve estupendo.

Responder
Birdelo  

JMIur. Entonces como lo añade a los bordes. Será poniendo el la propiedad donde ...contenido del bloque...?.

Soy medio torpe y por eso nunca he podido usar esto que se ve tan cuco!!!.

Responder
JMiur  

Del mismo modo que al fondo:

colorFade('test','border','FF0000','555555',25,30)
colorFade(test','border','555555','FF0000',25,30)

Responder
luis fernando  

Hola muy buen aporte, una pregunta me gustaria descargar el arhcivo, pero ya no lo encuentro y en skdrive no se como se llame el zip, me podrias ayudar con esto, te lo agradeceria mucho

JMiur  

Lo siento pero no tengo ese ZIP.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR