Efectos en imágenes con FadeIn y FadeOut

Siempre queremos darle la mejor presentación a nuestra página web usando y manejando imágenes de la mejor manera, muchas veces recurrimos a métodos que nos permiten crear efectos de alta calidad pero con el defecto que hacen lenta y no muy funcional nuestra página haciendo que la navegación dentro de la misma sea molesta para el usuario.

Por eso en esta publicación te mostraremos como desplegar algunas imágenes sin hacer uso de técnicas que estropeen la funcionalidad de tu página.

Documento HTML
Lo primero que debemos hacer es nuestro documento HTML, donde en una lista desordenada agregamos imágenes y dos enlaces con id “mostrar” y “ocultar”, conteniendo el mismo texto.

Documento CSS
Agregaremos un estilo, en un archivo CSS, para nuestros elementos en la lista de imágenes donde no se vea ninguna viñeta y se encuentren colocados a la izquierda. Es importante no mostrarlos en un inicio, esto lo podemos hacer agregando “display: none”.

Creación del Script
Para realizar el efecto sobre las imágenes haremos un script. Usaremos JQuery así que debemos agregar la siguiente librería en nuestro HTML: https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Utilizaremos la sentencia “document.ready “y dentro de ella cargaremos la función padre que contendrá las dos funciones dependientes que serán activadas mediante el evento “click” que se efectúa sobre los enlaces.

Finalmente pasamos a definir el contenido de cada una de las funciones internas, que serán las encargadas de llevar acabo el efecto de mostrar nuestras imágenes.
Para darle un estilo elegante al mostrar las imágenes, usaremos la librería FadeIn y FadeOut de JQuery, las cuales nos permiten agregar efectos de desvanecimiento en las imágenes.

La función “muestra” utilizará el efecto FadeIn para que cada imagen se muestre cada 250 ms, y de manera recursiva mande llamar a la función “mostrarimg”.

Para uso de la recursividad crearemos una variable con el nombre de “i” inicializándola en 0. Una vez iniciado el ciclo la variable ira aumentando de valor cada vez que se llame a “mostrarimg” esto dejará de funcionar una vez que la variable i alcance un valor fuera de la lista. Cuando la función devuelva un elemento que no existe, JQuery devolverá un objeto vacío, y deja de llamar a FadeIn.

Lo mismo haremos del lado de la función “ocultar” pero con las siguientes variantes, en vez de utilizar FadeIn utilizaremos FadeOut, le daremos un tiempo de 150 ms, para dar un efecto de borrado rápido. En vez de tomar a “0” como el valor default de la variable “i”, tomaremos el tamaño de nuestra lista como el valor.

Finalmente en vez de incrementar el valor dentro de nuestro ciclo, lo iremos disminuyendo, de esta manera primero desaparecerá la última imagen y el ciclo concluirá con la primera.

See the Pen
Imagenes
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.