Efecto de Slide para gráficos.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este es un ejemplo de animación realizado con la librería jQuery, para aplicar un efecto de slide a una imagen o cualquier otro contenido colocado dentro de un DIV.

Al concluir la animación, es posible visualizar dentro del DIV, un texto o cualquier otro contenido HTML, por ejemplo una descripción del gráfico junto a un enlace, otra imagen o cualquier cosa que se nos ocurra.

Este ejemplo también puede ser de utilidad, para visualizar una lista de productos, donde se presente la fotografía, y mostrar luego los detalles: Precio, descripción etc ..

El efecto animado se realiza en el mouseover, es decir al pasar el mouse encima de la imagen, pero también podría adaptarse de otras formas, por ejemplo creando una botonera para mostrar varios gráficos, similar a una presentación de tipo slide/show.

Mas información sobre el programa.

Demostración

Puedes ver una demo del script pinchando en este enlace. En la página del autor puedes ver varias formas de aplicar los efectos de animación.

¿ Cómo funciona el ejemplo ?

Esta es la página principal del tutorial. Visitar

Básicamente el artículo explica el código CSS utilizado y como aplicar los diferentes tipos de slide.

Las animaciones que se pueden utilizar son: Slide de tipo vertical, horizontal, desde la derecha, desde la izquierda, en forma diagonal y slide en forma parcial. Este último usado para dejar una imagen de fondo y un texto o caption animado para la imagen.

Sitios webs

Esta es una lista de sitios webs que utilizan este efecto, o similar adaptado para diferentes usos y que puede ser útil para sacar ideas.