Fade Transition & Demure Layout Javascript Slider
Esta presentación es inteligente y moderna, con líneas limpias y una paleta de colores atractiva, con azul, gris y blanco.
Es una presentación moderna usando técnicas de animación de CSS3 para resaltar y reducir los tiempos de carga y dependencia a javascript/JQuery. Como es de esperarse, es completamente responsiva. Se le dio mucho pensamiento a como hacer que la presentación opere bien en todos los tamaños de pantallas, haciendo que la presentación no solo se escale en tamaño sino que se eliminen elementos en tamaños mas pequeños para mantener que las imágenes sean el centro de atención.
La mayoría de las técnicas de animación son simples, lo que ayuda a que la presentación se vea moderna y limpia u no distraiga de la imágenes. Por ejemplo, cada imagen cambia a la siguiente de manera rápida y limpia con un desvanecimiento básico.
Si mueves el cursor sobre la presentación, aparecen elementos adicionales. Estos son tres cajas grises semitransparentes que son angostas y alargadas. Dentro de cada caja hay un icono blanco. Estos iconos se abren en su lugar, como puertas abriéndose. El efecto en general es estiloso y moderno.
Mover el cursor sobe alguno de los iconos hace que se vuelva azul y se vuelva un cuadrado. Es el caso de las dos flechas, el rectángulo crece en ancho y se toca el borde de la presentación. Esto tiene dos resultados: primero, deja en claro que puedes interactuar con los iconos, y segundo, crea un área mas grande – haciéndolos mas fácil de usar, especialmente en pantallas pequeñas.
Hacer clic en los iconos le permite al usuario moverse hacia delante atrás en la presentación, y pausar/reproducir la presentación.
También es posible omitir alguna diapositiva usando la navegación de viñetas en la parte inferior de la presentación. Esto es un set de círculos grises, cada uno representando una imagen de la presentación. Cuando se carga una imagen relevante los círculos se vuelven azules. Cuando mueves el cursor sobe un circulo aparece una pre visualización de la parte inferior, imitando otros efectos de IU. Como es de esperarse, hacer clic en el circulo carga la imagen relevante.
Hay un titulo y subtitulo en la parte inferior izquierda de la presentación. El titulo es texto blanco en un rectángulos gris semitransparente, y el subtitulo es texto blanco en un rectángulo azul. Ambos rectángulos se abres en la parte superior. El texto usa la tipografía sans-serif “roboto” una tipografía natural y amigable que no sacrifica legibilidad.
En general el diseño es extremadamente flexible y puede ser usado en una gran variedad de sitios web, incluyendo blogs, comercios digitales, agencias de viaje, sitios de turismo, etc. Es atractivo y moderno y garantiza que los visitantes tendrán una primera impresión positiva . Los colores funcionan bien juntos, aunque puede cambiarlos en cssSlider para que queden mejor con los colores requeridos en su sitio web.