Slide Animation & Blast Theme Image Slider

Este dramático y hermoso deslizador es para pantallas anchas y solo para CSS. Está habilitado para gestos táctiles, lo que lo hace ideal para tabletas y teléfonos inteligentes, y también es muy rápido para cargar.

Ya que el deslizador es para pantallas anchas, las imágenes ofrecen un máximo impacto, haciendo que sea una gran opción para fotógrafos y personas que quieran que el centro de su sitio sean las imágenes.

Hay dos flechas de navegación y un botón de pausa/reproducción que aparece cuando el usuario interactúa o pasa el cursor por encima de las diapositivas. Estos elementos se componen de iconos blancos en negritas sobre un fondo circular azul, y parecen 'caer' en posición, desvanecerse y contraerse. Es un efecto dramático y atractivo, que funciona perfectamente a la inversa al momento en que los iconos parecen 'elevarse' desde la barra de desplazamiento. Todo este proceso le da al diseño una sensación tridimensional.

Al pasar el cursor sobre los iconos crea un borde azul que parece irradiar del círculo central y luego se desvanece. Una vez más, es un efecto elegante y dramático que realmente hace que este diseño se destaque entre otros.

Los iconos hacen exactamente lo que espera que hagan: al hacer clic en las flechas siguiente/previo te llevan a las diapositivas correspondientes, y al hacer clic en el botón de reproducción/pausa, detienen o inician la presentación.

El usuario también puede navegar por las diapositivas mediante el uso de los círculos en el centro inferior de la pantalla. Estos círculos son de color azul intenso, y cada uno representa una imagen de la presentación. Cuando una nueva imagen aparece en la pantalla, el círculo correspondiente muestra un borde blanco y semitransparente, el cual llama la atención y ayuda al usuario a comprender cómo funcionan los círculos.

Al interactuar con los círculos muestra una vista previa de la imagen en un marco azul. Esta imagen de previsualización entra en forma de caída y sale en forma de vuelo de la misma manera que lo hacen los otros iconos. Al hacer clic en un círculo este carga imagen deseada en la presentación.

Cada imagen en el deslizador se "desliza" a la siguiente, ya sea a la izquierda o a la derecha, dependiendo de si se trata de la siguiente diapositiva o de la anterior. Al usar los círculos para navegar hasta una imagen que está a dos o tres diapositivas de distancia, o cuando la presentación de diapositivas llega el "final" y regresa al inicio, esta se desplaza por todas las imágenes rápidamente. Esto le da un efecto natural y "realista", el cual es bastante sutil, y hace que el deslizador se sienta agradable y natural.

Un cuadro de texto se posiciona en la esquina inferior izquierda. Tiene un título y un subtítulo, ambos con un texto blanco en un rectángulo azul semitransparente. Los cuadros de texto 'caen' y se 'elevan' dentro y fuera del lugar, de la misma forma que los demás iconos y las vistas previas de las imágenes. El fondo azul semitransparente permite que se vean los colores de la imagen que está debajo, y le da al título una sensación un poco más suave.

Los cuadros de texto utilizan Duru Sans, un tipo de letra sans-serif que mezcla el diseño humanista y modernista. El resultado es un estilo muy elegante, y brinda una sensación sofisticada.

Ya que no hay JQuery, javascript e imágenes, este deslizador es rápido y funciona en cualquier plataforma. Será perfecto para diseñadores de dispositivos móviles.