Fadeout y Fadein Con HTML,CSS y Javascript

• 

Muy buenas a todos, yo soy Nad GarDez y este es una nueva entrada del blog "Code Proyects Nad GarDez". Para esta nueva entrada estaremos desarrollando los efectos de Fadeout y Fadein con HTML,CSS, y Javascript.

Para esta funcionalidad muy bien podríamos utilizar alguna función de la librería de "JQUERY" pero ese no es el objetivo de hoy. Es totalmente posible realizar estas dos tareas (y muchas otras mas) usando Javascript puro, después de todo es la base de librerías como JQUERY y otras. Sin mas preámbulo. ¡Empecemos!

Fadeout

Fadein

Primero aclaramos

• Fadein: relativo a Aparecer en español, corresponde a nuestro primer ejemplo de arriba hacia abajo, a demás este puede ser aplicado a fotos, contenedores, texto y en general a toda nuestra pagina. Primero vuelve transparente al elemento elegido y luego va agregando los colores de a poco hasta dar con la imagen o elemento original.
• Fadeout: relativo a Desvanecer en español, corresponde a nuestro segundo ejemplo de arriba hacia abajo a demás este puede ser aplicado a fotos, contenedores, texto y en general a toda nuestra pagina. Este efecto toma el elemento en su fase original, y le va quitando los colores  poco a poco hasta quedar totalmente transparente.

Seccion HTML

Para nuestra sección HTML solo necesitaremos dos elementos, en este caso dos imágenes repetidas, le agregaremos id y clases distintas. En tu caso puedes aplicarlo a cualquier elemento de tu pagina, solo tienes que asegurarte de identificarlo de la mejor manera para que Javascript pueda trabajar con el. También agregaremos un pequeño mensaje para identificarlo a cada uno.

<h2>Fade out</h2>
<img class="imagen" id="imagen" src="paisaje.jpg"><br>

<h2>Fade in</h2>
<img class="imagen2" id="imagen2" src="paisaje.jpg"><br>

Seccion CSS

Para nuestra sección CSS vamos a tener unos estilos bastante sencillos, en este caso el código CSS no es tan relevante para completar los efectos de fadein y fadeout, solo nos van a ayudar a posicionar dar tamaño a los elementos, y dar un estado inicial a los elementos seleccionados para aplicar los efectos. Vamos a usar las siguientes clases:

• .Imagen: Para identificar al elemento que se le aplicara fadeout
• .Imagen2: Para identificar al elemento que se le aplicara fadein
• Una clase contenedor que en nuestro (del código depositado en Github ) es el mismo body

*{

margin:0px;

padding:0px;

text-align:center;//para centrar nuestros elementos

}

.imagen{

width:80%;

height:80%;

}

.imagen2{

width:80%;

height:80%;

opacity:0;

}

Estos estilos son totalmente opcionales, pueden ser adaptados a sus necesidades. La única propiedad que seria de carácter mas necesario es "opacity=0"  para el elemento que se le va a aplicar el fadein. Este elemento en su estado inicial debe ser invisible, si lo obviamos se va a mostrar por una fracción de tiempo antes de que empiece el screipt de fadein.

Sección Javascrpt

Hemos llegado a la sección mas importante de este episodio. Para mejor entendimiento menciono las tareas a llevar a cavo.

• Declarar variable "opacidad" y "opacidad2" e igualarlas a 1 y a 0 respectivamente
• Crear función aparecer.
•  Seleccionar elemento por medio de la id.
• Restar el valor 0.1 a opacidad. 
• Igualar la propiedad opcity a opacidad.
• Si opacidad es menor a 0 igualamos opacidad a 1.
• Crear función desaparecer.
• Seleccionar elemento por medio de la id.
• Sumar el valor 0.1 a opacidad2..
• Igualar la propiedad opacity a opacidad2
• Si opacidad2 es mayor a 1 igualamos opacidad2 a 0.
• Crear Intervalo para llamar a la función Aparecer cada 150 mili segundos.
• Crear Intervalo para llamar a la función Desaparecer cada 150 mili segundos.

var opacidad=1;

var opacidad2=0;

setInterval(desaparecer,150);

setInterval(aparecer,150);

function desaparecer(){

var elemento= document.getElementById("imagen");

opacidad=opacidad-0.1;

elemento.style.opacity=opacidad;

if(opacidad<0){

opacidad=1;

}

}

function aparecer(){

var elemento= document.getElementById("imagen2");

opacidad2=opacidad2+0.1;

elemento.style.opacity=opacidad2;

if(opacidad2>1){

opacidad2=0;

}

}

Este seria el final del código. Felicidades si te salio a la primera y No te rindas si tienes algún error, parte del trabajo de los programadores es leer y detectar errores.

Espero de corazón que esta entrada les halla gustado y ademas les sido de mucha utilidad. Bajo esta dirección podrás ver ver mis entrada anterior Como hacer un preloader secillo. Les invito a segirme en twitter como:  @IranadJOSUE y @GardezNad. ¡Saludos a todos!