Mejora tu diseño con efectos y animaciones web

Aquí descubrirás las animaciones css, las html5 y aplicaciones para crear animaciones tu mismo.

Actualmente recibimos un bombardeo constante de inputs externos, nuestra capacidad de concentración y de atención se ve mermada y, por tanto, se debería de dirigir a los usuarios hacia aquellos que nos interesa, que se fijen en aquello que es importante. ¿Cómo? Con el truco de les animaciones.

Con código (y mucha cafeína y paciencia) se puede hacer magia. Las animaciones son una manera de convertir en dinámica una página web. De esta manera podemos jugar con los efectos visuales y captar la atención del usuario hacia aquello que nos interesa que vea.

El abanico de opciones es muy grande, pero, para no os hagáis una idea, puede ir desde un efecto hover de un botón, pasando por una ilustración que tenga un pequeño movimiento, hasta la aparición de elementos de la web durante la navegación cuando se hace scroll. ¡Más adelante profundizaremos más, no sufráis!

Vídeo: Bilder meines Lebens

En la vida real estamos rodeados de movimiento, ya sea a una velocidad visible o tan lento que sólo la podamos percibir a en cámara rápida. No obstante, ¡todo a nuestro alrededor se mueve!

El objetivo de la web: ¿complementos o contenidos?

A partir del objetivo de la web se pueden enfocar las animaciones hacia el contenido o hacia los complementos. Se tiene que tener en cuenta que las animaciones tienen que ayudar a dinamizar la web y hacerla más atractiva, pero no tienen que distraer al usuario del objetivo principal de la página web, sea cual sea.

Los objetivos de la página web se pueden centrar en el contenido o en los complementos, como ya hemos dicho antes. Veámoslo:

  • ·
    Contenidos: si el contenido es muy importante y queremos que el usuario se dedique a leerlo se tiene que vigilar en no desviar su atención con animaciones permanentes de elementos laterales o de fondo, sino que podemos animar el mismo contenido para irlo mostrando a medida que lo vaya leyendo. De esta manera también podemos dirigir su mirada hacia los elementos que nos interesen más.
  • ·
    Complementos: dar más importancia a conceptos cortos y elementos gráficos, podemos jugar más con animaciones complementarias que den vida a la página.

Tipos de animaciones web

Hover

Efectos animados sobre objetos cuando nos situamos encima con el cursor. Son animaciones que normalmente se programan en CSS. La utilización más habitual es el efecto animado en los botones.

Animacions web - hover CSS

Background: el Parallax

Una de las posibles animaciones background es el efecto parallax. El Parallax es la simulación de profundidad mostrando diferentes elementos en multicapas y animándolas a velocidades diferentes cuando se hace scroll en la página.

Cuanta más diferencia de velocidades y más elementos diferentes se utilicen, más sensación de profundidad. Nos puede ayudar en el efecto la utilización de sombras en los elementos más cercanos.
Eina
Como curiosidad del parallax, este es una variante moderna de la técnica de animación clásica llamada ‘cámara multiplano’ que inventó un fundador de Disney en 1933.

Animacions web - Parallax natura

Foto: Sasint

Los paisajes tienen multitud de capas de diferentes profundidades de campo. La técnica del parallax intenta imitar la visión binocular que tenemos los humanos.

Slideshows

Es una manera dinámica de mostrar una galeria de imagenes. Tienen muchas opciones: pueden ser automáticos, que vaya cambiando de foto cada cierto tiempo o interactivos es decir, que los usuarios vayan pasando las fotos a su ritmo. No obstante, pueden combinar las dos modalidades, que sea automático por sí mismo, e interactivo cuando el usuario interaccione.

Scrolling

El contenido va apareciendo en pantalla a medida que el usuario va haciendo scroll en la página. Una vez el contenido ya ha aparecido, este se queda estático para facilitar su lectura posterior

Ilustraciones animadas

Elementos gráficos que acompañan al contenidos de la página web, pero que tienen cierto movimiento con tal de llamar la atención del usuario o ayudar a entender aquello que se está explicando en el contenido. En otras palabras, son dibujos animados a partir de muy pocos fotogramas.

Animacions web - Parallax natura

Foto: Steve Harvey

Los pavos reales machos y jóvenes extienden sus plumas para llamar la atención de las hembras. Lo hacen no sólo con los colores del plumaje, también con sonidos y movimientos. ¡Todo sea para lograr un poco de atención!

Formatos

Los elementos gráficos individuales son aquellos que actúan sin interacción del usuario y que pueden ser animaciones en bucle permanente o con un inicio y un final. podemos hacerlos en GIP, SVG y HTML5. Vamos a verlos uno por uno:

SVG

Los SVG son ilustraciones en formato vectorial que pueden se pueden añadir al contenido en forma de código. Por tanto, pesan muy poco.

Hoy en día, la mayoría de navegadores ya soportan la animación de los SVG, ya que son escalables sin perder resolución y, por tanto, se pueden adaptar a todas las medidas de las pantallas.

Eina Herramienta:
Para animar SVG: Vivus

HTML5 Canvas:

La versión 5 del estandard de programación web HTML incorpora un elemento Canvas que permite, mediante JavaScript, dibujar y animar elementos directamente a pantalla e interactuar con vídeos e imágenes.

Eina Herramientas:
Para animar HTML5: Hype 3
Profesional: Adobe Animate
Gratuita: Google Web designer

GIF:

Los Gif’s se utilizan desde el principio de los tiempos del diseño web. Son muy pesados y no son escalables. No obstante son compatibles con todo tipo de navegadores.

Son videos de pocos segundos, sin sonido que, generalmente, se han utilizado en publicidad en los bàners de las páginas web.

Eina Herramienta:
Para animar GIF: GIFMake

El lenguaje: CSS y JAVASCRIPT

Para animar la mayoría de estas tipologías y formatos, los lenguajes que se utilizan son el CSS y el JavaScript que, combinados entre sí pueden provocar los efectos deseados.

El CSS por si solo tiene pocas herramientas de animación y todas van relacionadas con el efecto Hover que hace el usuario en los distintos elementos. Pero es el CSS el que determina el resultado visual de los elementos como los colores, los textos, la medida, la forma, la opacidad, etc

El JavaScript, en cambio, es el que controla el resto de variables, como el tiempo, la velocidad, el que és visible en pantalla, el movimiento del ratón o la interacción entre los diferentes elementos de la animación.

La combinación de los dos lenguajes nos permite crear y controlar la mayoría de tipologías de animaciones que hemos comentado con anterioridad.

3 herramientas de animación gratuitas

Animate.css

Nos provee de un conjunto de animaciones CSS3 frescas y transversales. Las animaciones están divididas en diferentes grupos como, por ejemplo, cercadores de atención, entradas rebotantes, salidas de rebote, entradas de desaparecido y muchas otras. El abanico de opciones es bastante ancho.

¿Cómo funciona?

La liberia animate.css es un archivo .css con un conjunto de clases donde cada una de ellas tiene definida una tipología de animación. Disponemos de una gran variedad de animaciones CSS3 sin necesidad de crearlas. Fácil y diverso.

Animacions web - Animate.css

AniJS

AniJS es una biblioteca de JavaScript que permite añadir animaciones CSS3 y crear componentes sofisticados de la interfaz de usuario como pestañas de animaciones, acordes, maneras, menús desplegables, notificaciones de aplicaciones para móviles, revelaciones de desplazamiento, entre otras.

Una de las ventajas es que funciona con todos los navegadores modernos, incluyendo iOS y Android; además, no necesita bibliotecas de terceros y cuenta con un espectacular escaparate llamado AniCollection, donde podéis experimentar fácilmente con los diferentes efectos que ofrece la biblioteca.

Animacions web - Ani.js

Bounce.js

Bounce.js es una biblioetca práctica de JavaScript que permite crear animaciones complicadas. Bounce.js permite añadir componentes diferentes, como la flexibilización, la duración, el retraso y el número de rebotes.

Su interfaz de usuario avanzada permite añadir manualmente diferentes componentes a vuestra animación o seleccionar un preajuste predefinido, después reproducir la animación y ajustar las propiedades si es necesario.

Animacions web - Bounce.js

Ya no hay ninguna excusa para no darle un poco de vida y de color a tu diseño web. Prueba las diferentes animaciones y encuentra la que mejor se adecue a tus intereses. ¡Fácil! 😉

Si nos quieres conocer mejor,
¡contáctanos! Y si te gusta, ¡síguenos!