Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

Animaciones para llevar tu plantilla HTML básica al siguiente nivel

by
Length:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las animaciones pueden elevar la presentación de tu sitio web al siguiente nivel. Una animación adecuada tendrá un impacto positivo en la experiencia de usuario de tu sitio, reforzando cada interacción y creando una experiencia memorable. Por el contrario, una animación mal elegida podría arruinar esta experiencia, confundir a los usuarios y también, potencialmente, amortiguar el rendimiento.

En este artículo voy a compartir contigo algunos ejemplos prácticos de animación y técnicas para que tu página web con HTML básico brille como una estrella.

Categorizar las animaciones

Para que sea más fácil trabajar con las animaciones, primero me gusta clasificar y organizar sus diferentes facetas. Cada animación tendrá cinco parámetros, con un rango de valores posibles:

  1. Tipo: único, grupo, relacionado
  2. Secuencia: secuencial, aleatoria, simultánea
  3. Evento: carga, desplazamiento, clic, pasar el ratón, cambiar el tamaño, etc.
  4. Tamaño: pequeño, mediano, grande
  5. Repetición: no-repetir, repetir

Nota: este no es un estándar W3C, se trata de mi sistema personal para mantener las cosas claras.

Tener estos parámetros en mente nos ayudará ha hacer mejores animaciones. Veremos cada una de estas cinco cosas por separado. Después de esto te mostraré cómo animar cualquier cosa en la web usando una combinación de jQuery y animate.css.

1. Tipo

Hay situaciones en las que necesitarás animar una única cosa.

Después, habrá ocasiones en las que tendrás que animar elementos agrupados (hermanos), por ejemplo: iconos, imágenes en una galería, columnas en una sola fila, etc.

O es posible que necesites animar elementos relacionados; es decir que están relacionados entre sí sin ser hermanos directos.

2. Secuencia

La secuencia de las animaciones se puede controlar mediante un retraso de la animación. El retraso puede retardar las cosas para que las animaciones se realicen de forma secuencial. Es posible que desees que las cosas sucedan al azar, o tal vez quieras que dos o más elementos se animen simultáneamente.

3. Evento

La animación puede tener lugar cuando se produce cualquier evento concreto de los conocidos en el mundo web: durante el desplazamiento de la página, la carga de la página, cuando se hace un clic, cuando se sitúa el ratón sobre un elemento, cuando se cambia el tamaño de la ventana, etc. El tipo de evento es importante, siempre y cuando cada animación se planifique y se ejecute de forma correcta. En nuestro ejemplo vamos a ver todo esto paso a paso, vamos a utilizar el desplazamiento de página como evento para desencadenar animaciones cuando los elementos entren en la ventana de visualización.

4. Tamaño

El tamaño es un término relativo. El "tamaño" de la animación puede ser interpretado en relación a su duración, sus dimensiones físicas, o el valor de su movimiento. La velocidad con la que animas un elemento pequeño probablemente será diferente de la velocidad con la que animes un elemento más grande. Todo es interpretable, pero es importante tener en cuenta el "tamaño" para conseguir el resultado final deseado.

5. Repetición

Al planificar la animación también debes planificar su ciclo, es decir, cuántas veces se debe repetir por evento.

Añadir una animación a una página HTML básica

Vamos a aplicar una gama de animaciones a varios elementos en una página (larga). Escribiremos jQuery para calcular cuándo entra en la ventana un elemento y, a continuación, usaremos ese código para agregar una clase animated al elemento o elementos en cuestión. Esto activará la biblioteca animate.css, encargada de ejecutar la animación que queremos.

Puedes descargar los archivos fuente desde el repositorio, modificar los valores que desees y utilizarlos en tus propias plantillas HTML básicas. O, tal vez prefieras hacer una copia del pen. Sea cual sea tu preferencia, a continuación se muestra una explicación de lo que está sucediendo.

¿Qué está pasando?

Comencemos mirando la actual demo, para que sepas en lo que estás trabajando:

Por tanto, para empezar, necesitaremos cuatro funciones jQuery que pondremos en el archivo controller.js, o en el panel JS si estás utilizando CodePen. Echemos un vistazo más de cerca a cada uno.

isInViewport(h);

Esta función detecta si un elemento está en la ventana de visualización. Acepta un parámetro (entre 0 y 1) que indica a la función la parte mínima del elemento que debe estar en la ventana de visualización. De forma predeterminada, se trata del 40% del elemento (0,4). Así es como se ve en conjunto:

randomDelay

Esta siguiente función establece un retardo aleatorio de animación a un conjunto determinado de elementos. Se utiliza para animaciones agrupadas y acepta tres parámetros:

  1. children: el selector del conjunto de elementos
  2. maxDelay: retardo máximo de la animación
  3. minDelay: retardo mínimo de animación

Este es el aspecto que tiene:

sequentialDelay

Esta función es muy similar a la anterior, a excepción de que se utiliza para añadir un retardo secuencial a un conjunto determinado de elementos.

Toma dos parámetros:

  1. children: el selector del conjunto de elementos
  2. delayGap: valor constante de retardo mínimo entre los elementos del grupo.

Aquí lo tienes:

animateIfInViewport

Esta última función es bastante carnosa. Añade la clase animated al elemento o grupo de elementos de destino y envía los datos de animación.

Aplicar funciones

En este ejemplo he utilizado dos eventos para las animaciones: la carga de la página y su desplazamiento. Desplázate hacia abajo más allá de las cuatro funciones de inicio y las verás en acción, anidadas en un una función (función($)-...)) (jquery) que es "invocada de inmediato". Por ejemplo:

Esto indica: para cada .section-title, añade la clase animated cuando entra en la ventana de visualización.

Si echas un vistazo al código (en el archivo index.html) verás que cada elemento que deseas animar tiene un atributo data asociado. En el caso de los títulos de la sección, verás data-animation="fadeInRight". Esto se corresponde con una animación fadeInRight configurada en animate.css, todo hecho con CSS, por supuesto.

De manera que, cuando el título de la sección se desplace y quede a la vista, se le aplicará la clase animada y se ejecutará la animación fadeInRight.

Este es otro ejemplo:

Esto busca el elemento #row-bounceIn, a continuación, cuando aparece en la ventana de visualización toma los elementos hijo (.col en este caso) y añade la clase animated. También aplica un retardo aleatorio a la animación, algo entre 200 y 500 milisegundos.

Comprueba el código y verás que esos elementos .col tienen un data-animation="bounceIn" adjunto a ellos. Por lo tanto (a ver si lo puedes adivinar) rebotan de acuerdo a las reglas definidas en animation.css.

Consejo: Modifica Animate.css para que se adapte a tus necesidades

Puedes modificar las reglas de animación en el marco animate.css y te recomiendo encarecidamente hacerlo. Piensa en animate.css como un punto de partida que necesita ser pulido. Por ejemplo, a mi siempre me gusta cambiar la función de sincronización y reducir la cantidad de traslación en las reglas de animación CSS.

Aquí lo tienes todo junto. Desplázate hacia abajo y observa la animación a medida que entra en la ventana gráfica.

Conclusión

Cuando pones todas estas cosas juntas puedes crear increíbles plantillas HTML con llamativas animaciones.

Eres libre de usar cualquier archivo y fragmentos de código de estos ejemplos en tus proyectos sin restricciones. También eres libre de modificar cualquier cosa en los archivos de ejemplo proporcionados. Y te invitamos a hacer sugerencias y recomendaciones en la sección de comentarios que viene a continuación. ¡Gracias por leer!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.