Rotate Animation & Agile Style Image Gallery
Este deslizador solo para CSS carga rápidamente y es totalmente receptivo. Permite al usuario hacer gestos táctiles para navegar a través de la diapositiva, lo cual es ideal para diseñadores de dispositivos móviles. El aspecto general es simple y fresco, pero con algunas peculiaridades interesantes. El deslizador utiliza un esquema de color blanco y naranja.
La demostración no tiene bordes, y tiene una forma bastante cuadrada, lo que significa que la presentación es muy flexible y se puede utilizar con una amplia gama de fotografías.
Al pasar el cursor sobre la imagen, la diapositiva muestra dos flechas de navegación en ambos lados y un icono de pausa/reproducción en el centro. Las flechas de navegación tienen sus puntas blancas y están en un círculo naranja, y el icono de reproducción/pausa también es blanco en un círculo naranja. Estos iconos 'giran' en su sitio, y si deja detiene el cursor sobre el deslizador estas giran y se desvanecen.
Si el usuario se desplaza sobre los iconos, aparece un segundo borde naranja alrededor del círculo naranja, creando un efecto de "doble círculo '. Las flechas de navegación se desplazan hacia atrás y hacia delante, incitando al usuario a hacer clic sobre ellas. Al hacer clic en cualquiera de las flechas, le permite al usuario ir hacia atrás y hacia delante a través de las imágenes.
Al hacer clic en el botón de "pausa" evitará que el deslizador muestre la siguiente imagen y hace que cambie el icono a 'reproducir'. Al hacer clic en el símbolo de reproducción hace que la demostración comience de nuevo.
El cuadro de texto se encuentra en la esquina inferior izquierda y utiliza un tipo de letra sans-serif llamado "Lato". El texto es de color blanco, y se ubica en un fondo naranja. El cuadro de texto tiene un título y un subtítulo, y ambos tienen fondos rectangulares separados con esquinas redondeadas que se combinan para crear una nueva forma. Estos cuadros se acercan lentamente a la vista del usuario uno tras otro, produciendo una sensación orgánica.
En la parte inferior de la diapositiva son un conjunto de círculos de color naranja, que representan imágenes de la presentación. El círculo que representa la imagen actual gana un borde naranja que crea un efecto de "doble círculo '. Un buen detalle es que el segundo círculo es ligeramente torcida. Es una característica de diseño sutil, pero ayuda a que el diseño se siente del todo orgánico.
Cuando el usuario se desplaza sobre un círculo, aparece una imagen de vista previa en un cuadro naranja acercándose lentamente a la vista del usuario. Estas imágenes permiten al usuario ver las otras diapositivas y seleccionar la deseada.
El efecto de transición por defecto es “rótate”, lo que hace que ingrese la nueva imagen y que salga la imagen anterior deforma giratoria. La sensación es sencilla y moderna, así como con mucho movimiento.
El diseño es moderno y divertido, y puede funcionar perfectamente con una amplia gama de sitios web. La receptividad del diseño exclusivo para CSS lo hace perfecto para sitios móviles optimizados, por lo que es ideal para empresas que necesiten dar información y vender sus servicios a personas que estén en cualquier lugar – como los sitios web de transporte público, sitios de compras de 'última hora' y sitios web de turismo.