Aparecen, desaparecen! la opacidad en javascript.
Aparecer y desaparecer un div no es muy dificil, solo un poco de CSS una llamada y listo!!, pero tampoco es elegante ¿No creen?, la aparición abrupta de un div no es lo más vistoso del mundo, asi que porque no mejorarlo, haciendole un efecto de fading algo simple y sencillo con javascript.
Vamos por partes, ahora nos dedicaremos al efecto, para que vayan conociendo loas bases del javascript como las conocí yo y como las sigo conociendo:
Vamos a poner la estructura básica que usaremos para el trabajo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pruebas</title> </head> <body> <span>Click Aqui</span> <div id="escondido"> <p>Lorem ipsum vel commune praesent maiestatis in, no suavitate persecuti sententiae ius, ea cum facete sanctus detracto. Saepe recteque tractatos qui te, ius summo mentitum at. Sed etiam option delicatissimi ad. Alia altera lobortis vim id, id iisque commune cum. </p> </div> </body> </html>
Listo, tenemos nuestro div que vamos a esconder y el lugar donde llamaremos, ahora vamos a darle un poco de estilos:
<style type="text/css"> #escondido{ width:400px; height:200px; background:steelblue; color:#fff; display:none;<----- aqui es donde disponemos que esté escondido. (Aqui variamos la opacidad, que es un atributo CSS que viene en la especificación 3). filter: alpha(opacity=0); <---- Para el IE. -moz-opacity:0; <----- Para el firefox. opacity: .0; <------------ Para cuando funcione el standard. -khtml-opacity: 0; <-------- Esta para los que usan webkit (Chrome, Safari, Konqueror) } </style>
Ahora vamos a pasar a la parte del Javascript.
<script type="text/javascript"> var color = 0; var suma = 10; function aparecer(){ var obj = document.getElementById('escondido'); obj.style.display = "block"; color += suma; if (!(color>=110)){ obj.style.filter = 'alpha(opacity='+color+')'; obj.style.opacity = color /100; obj.style.MozOpacity = color /100; obj.style.KHTMLOpacity = color /100; window.setTimeout("aparecer();", 100); } }</script>
Muy bien, con esto debería funcionar!!, supongo que están pensando: "Pero aguanta! no entiendo ni queso de lo que has puesto chino. He venido por un tutorial y tu me pones tu nota y no me explicas nada."
La paciencia es una virtud, asi que vamos a ser pacientes todos y explicaremos paso por paso el script.
var color = 0; var suma = 10; function aparecer()
Aqui estamos estableciendo el valor de dos variables, la de color (Que nos servirá para aumentar la solidez.) y la de la suma, que es masomenos como la velocidad que tendrá en actuar. La suma es preferible que sea 10, porque es un número mediano, asi el efecto se verá mejor ya que no será muy abrupto ni muy lento. En otras palabras, se verá fluido.
Y lo otro es el nombre de la función, usaremos ese nombre para llamarla más adelante.
var obj = document.getElementById('escondido');
Aqui establecemos otra variable, pero dentro de la función, esta es una "variable local" osea que solo afectará la función en la que está, las anteriores eran globales, osea afectan a todas las funciones de la página. Ya veremos su importancia más adelante.
Lo que hacemos aqui, es decirle que la variable obj es igual al elemento que tiene el ID "escondido" dentro del documento, esta manera de llamar a un elemento por su ID es propiedad del DOM nota de la que hablaremos más adelante también.
obj.style.display = "block";
Aqui vemos que se puede cambiar las propiedades CSS de un elemento mediante javascript, dado que ya tenemos el valor de obj y ese valor es nuestro div "escondido" todos los cambios que se le hagan a obj a partir de ahora, se le harán a "escondido". Entonces estamos pasando el estado de su display, que era "none" y hacía que no se mostrara a "block" que hace que aparezca.
Hasta ahí ya apareció, pero tiene una opacidad de 0. Asi que igual no lo podremos ver. Asi que aqui es donde viene la magia.
color += suma;
Esta linea es muy importante, porque aqui es donde hacemos que la opacidad avance de diez en diez. Ya que estamos sumando "color" con la "suma", que como sabemos es 10.
if (!(color>=110)){Aqui vamos a comenzar a indicar la secuencia. el "if" como sabemos, es un comando de javascript y de otros lenguajes de programación más potentes. Con el indicamos que se haga una acción si se cumple un requisito. Aqui estamos negando el requisito anteponiendo un signo de admiración. Esto hace que deba leerse al reves de lo que está indicado. Osea que lo que debería leerse "Si el valor de color es mayor o igual a 110" pasa a ser "Si el valor de color es menor o igual a 110" hacemos esto para que se cumpla el requisito cuando tome cualquier valor que sea menor a 110.
¿Por qué 110? porque cuando el valor sea 110 ya no cumplirá el requisito y no se ejecutará. asi quedará solamente en 100.
obj.style.filter = 'alpha(opacity='+color+')';
obj.style.opacity = color /100;
obj.style.MozOpacity = color /100;
obj.style.KHTMLOpacity = color /100;
Estas son las ordenes que se deberán cumplir, claro, todas son la misma orden, solo que para diferentes navegadores. Vamos a ver, el "alpha opacity" es un filtro de microsoft, para su basura de navegador. Dado que no puede leer las opacidades (Ni tampoco las transparencias PNG), se debe usar. Para esta ponemos un número entero del 1 al 100 y será el grado de opacidad.
Las siguientes son para navegadores de verdad que ya han implementado esta opción, aunque aún por su cuenta dado que aún no se establece la 3era especificación del CSS. En estas el valor va de 0 a 1, y es expresado con un número decimal. Es por eso que dividimos entre 100 el número.
window.setTimeout ("aparecer();", 100);
Y aqui es donde armamos el bucle. La orden "settimeout" indica que un evento se repita solo una vez dada cierta cantidad de tiempo, expresada en milisegundos. Asi que mientras el requisito se cumpla, ira repitiendo la función.
Hay una función similar llamada "setinterval" pero esta repite la acción durante un intervalo de tiempo, todas las veces que sea necesario.
Muy bien, hasta aqui ya tenemos un div que aparece cuando cliqueamos en donde debemos. ¡Qué bonito!, pero, aguanta!! ¿Cómo se que funca?, pues la respuesta es muy sencilla, arriba en la parte del logo, donde dice: muralizado hay una lupa, si le dan click aparecerá un bonito buscador.
Tío aguanta, pero el tuyo aparece y desaparece!! aqui nosotros solo lo hacemos aparecer y de ahi que nos coma el tigre.
Pues, para hacer desaparecer el div lo único que debemos hacer, es revertir la función. Para eso haremos lo siguiente:
function desvanecer() { var obj2 = document.getElementById('escondido'); color -= suma; if (!(color <=-10)){ obj2.style.filter = 'alpha(opacity='+color+')'; obj2.style.opacity = color /100; obj2.style.MozOpacity = color /100; obj2.style.KHTMLOpacity = color /100; window.setTimeout ("desvanecer();", 100); } }
Aqui estamos aprovechando que color es una variable global, osea que queda almacenada, dado que la última vez que la ejecutamos se quedo en cien, podemos usarla en esta función y hacer que ese cien, baje a cero.
Ahora, para hacer la llamada haremos lo siguiente (Porque sino se tendrían que ejecutar aparte).
function llama(){ if (color<=0){ aparecer(); } else { desvanecer(); }}
Osea que si color es menor o igual a 0, se ejecutará la aparición, y si no es asi, se ejecutará el desvanecimiento.
Para llamar desde el documento hay varias maneras, pero ahora vamos a hacer la más simple que es la siguiente:
<span onclick="llama();">Click Aqui</span>
Entonces el documento en general, nos quedaría asi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pruebas</title> <style type="text/css"> #escondido{ width:400px; height:200px; background:steelblue; color:#fff; display:none; } </style> <script type="text/javascript"> var color = 0; var suma = 10; function aparecer(){ var obj = document.getElementById('escondido'); obj.style.display = "block"; color += suma; if (!(color>=110)){ obj.style.filter = 'alpha(opacity='+color+')'; obj.style.opacity = color /100; obj.style.MozOpacity = color /100; obj.style.KHTMLOpacity = color /100; window.setTimeout ("aparecer();", 100); } } function desvanecer() { var obj2 = document.getElementById('escondido'); color -= suma; if (!(color <=-10)){ obj2.style.filter = 'alpha(opacity='+color+')'; obj2.style.opacity = color /100; obj2.style.MozOpacity = color /100; obj2.style.KHTMLOpacity = color /100; window.setTimeout ("desvanecer();", 100); } } function llama(){ if (color<=0){ aparecer(); } else { desvanecer(); } } </script> </head> <body> <span onclick="llama();">Click Aqui</span> <div id="escondido"> <p>Lorem ipsum vel commune praesent maiestatis in, no suavitate persecuti sententiae ius, ea cum facete sanctus detracto. Saepe recteque tractatos qui te, ius summo mentitum at. Sed etiam option delicatissimi ad. Alia altera lobortis vim id, id iisque commune cum.</p> </div> </body> </html>
Hasta el próximo post!!.
Artículos Relacionados
-
- Efecto sencillo de Fade con Javascript.
- Introducción corta a las CSS.
- Hermoso wallpaper de burbujas en photoshop.
¿Qué opinas respecto a esto?
Comentar es alentar al que escribe un artículo a seguir adelante, ya que es una manera de demostrar que la lectura es apreciada, además te permite hacerme llegar sugerencias sobre próximos temas o sobre algún evento que deba postear.
Saludos y Hasta el próximo post.
No seas tímido deja un comentario!! (Click aqui).
Ir Arriba
Luis Velito dijo:
Justicia en este post para Fabio, y seguimos con los inspiracionales.
El siguiente probablementte sea Andres NIeto.
Luis Velito dijo:
Si claro, pero como son fundamentos de javascript, uso ejemplos fáciles para comenzar.
Saludos!!
Está excelente!!!!, gran trabajo.
Ahora quisiera saber lo siguiente:¿es posible aplicar el efecto a dos divs distintas en la misma página sin tener que cambiar todo el código?. Esto porque me interesa poder tener varias divs que aparezcan y desaparezcan con textos y fotografías diferentes.
Muchas Gracias
Luis Velito dijo:
Por supuesto que se puede, voy a hacer un ost esta semana explicando como puede hacerse eso.
Saludos!!
Very interesting! buy tamoxifen 8-] cialis 85387 metformin weight loss xhs diflucan >:-PPP buy clomid 295898 buy alprazolam =OOO buy synthroid 8-OOO tramadol hcl baj cipro 7915 diazepam without a prescription =-O orlistat uqdu zolpidem 53417 buy phentermine 70714 fluoxetine fpqbi buy viagra 9113 citalopram hydrobromide 801 metronidazole 696765 buy reductil 8-[
Very interesting! clomiphene =-OO buy clonazepam orl buy ativan =]] buy ativan ycpvwr amoxicillin 8P buy prozac %]] buy diazepam :-DD buy esomeprazole %-] buy levothyroxine 4640 buy viagra 459 buy accutane 8-)) fluconazole bnpd buy celexa iqpgr buy celexa >:]]] vibramycin 2225 vardenafil 2725 buy ciprofloxacin %-]] clonazepam xpdrd
Very good site! buy ultram zfpklp buy nexium fifoc generic viagra nock buy alprazolam 762588 buy adipex nlkcr
¿Quién escribe esto?
Soy Luis Velito. Un Web Designer que intenta combinar el diseño con el desarrollo. Los invito a acompañarme en este camino en pos del equilibrio.
Información de Contacto
- Nombre: José Luis Velito Ruiz
- Nick: Dalvenjha
- Teléfono: 351-9796
- e-mail: l.dalvenjha@hotmail.com
- Lima, Diciembre del 2008.
Categorías
Post Recientes
- Wallpaper de Burbujas en photoshop
Tutorial para Photoshop sobre un wallpaper de burbujas, traido desde la Web de Fabio Sasso
Secciones: Photoshop, Tutoriales.
- Manual de Introducción al CSS
Especificaciones para comenzar el uso de CSS, su importancia y sus usos.
Secciones: CSS, Tutoriales.
- Jugando con el Fade en Javascript
Vamos a crear nuestro primer tutorial, este tratará de Javascript, es un efecto muy básico de aparición, desaparición de un div.
Secciones: Js, Tutoriales, Experimentos.
NLG Design no se hace responsable por las opiniones vertidas en este blog, es más, se DISTANCIA TO-TAL-MEN-TE de las opiniones aqui vertidas, en contra de Microsoft, internet explorer y otros productos por considerarlas DEMASIADO SUAVES.
