() translation by (you can also view the original English article)
Muchas personas desean añadir animaciones sutiles a su sitio web en respuesta a los clics u otras acciones de sus visitantes. Sin embargo, no todos saben bien cómo usar CSS o JavaScript. Algunos solo saben cómo modificar el HTML y hacer que el cambio se refleje en el sitio web.
Normalmente, esta es la parte en la que los desarrolladores se hacen cargo y añaden los códigos de JavaScript y CSS necesarios para que tu sitio web sobresalga. No obstante, si quieres crear un sitio animado tú mismo, sin codificar, una biblioteca llamada AniJS te ayudaría bastante.
AniJS te permite crear estilos animados para tu sitio web, ¡sin que tengas que codificar en JavaScript o CSS! Puedes especificar todas tus animaciones desde HTML usando una simple sintaxis If-On-Do-To.
Instalación
Antes de que puedas empezar a animar los elementos en tu página web con los atributos data-anijs, tendrás que incluir los archivos necesarios. Se necesitan tres archivos diferentes para acceder a toda la funcionalidad de AniJS. Estos archivos son la biblioteca de JS principal, el archivo CSS para las animaciones y otro archivo JavaScript auxiliar para utilizar una sintaxis especial de AniJS como $addClass, $toggleClass y $removeClass.
También puedes instalar la biblioteca con Bower ejecutando el siguiente comando:
1 |
bower install anijs --save |
Una vez que hayas incluido todos los archivos necesarios, los elementos de tu página web estarán listos para la animación.
Introducción a la sintaxis de AniJS
En su forma básica, AniJS utiliza la siguiente sintaxis para animar elementos particulares basados en cualquier evento.
1 |
If (any event happens), On (any element), Do (something like animate, add/remove class), To (this or any other element) |
Aquí, la parte If especifica el evento que activará la animación o la manipulación de la clase. La parte On especifica el elemento cuyos eventos AniJS debe escuchar. Esto puede ser diferente del elemento en el que has configurado el atributo data-anijs. La parte Do especifica la acción a realizar. Aquí, puedes especificar el nombre de la animación que quieres aplicar, etc. Por último, la parte To se utiliza para especificar el elemento que necesita ser animado o manipulado.
La parte If es necesaria para la declaración AniJS que añades para animar cualquier elemento La parte On es opcional y, si se deja sin especificar, utiliza el elemento actual como valor predeterminado. La parte Do también es necesaria, pues le dice al navegador qué hacer cuando ocurre el evento especificado. La parte To también es opcional y, cuando no se especifica, adopta como valor predeterminado al elemento actual.
También puedes utilizar los ganchos Before y After para especificar lo que debería ocurrir antes y después de que AniJS haga lo mencionado dentro de la parte Do.
Animando diferentes elementos
AniJS te permite ejecutar una animación activándola en cualquier evento aplicable incluido en la página MDN. De igual modo, puedes utilizar on y to para dirigirte a cualquier elemento que quieras, usando selectores de CSS. Por ejemplo, podrías especificar que quieres escuchar un evento en div.promotion o en section div p.firstt, etc. La parte do se puede usar para especificar la animación que quieras aplicar a diferentes elementos. AniJS tiene muchas animaciones que se pueden aplicar en cualquier elemento que desees.
El siguiente fragmento de HTML te mostrará cómo aplicar algunas animaciones en elementos que se activarán en ciertos eventos.
1 |
<div class="orange box" data-anijs="if: mouseover, do: swing animated"></div> |
2 |
<div class="pink box" data-anijs="if: click, do: tada animated"></div> |
3 |
<div class="red box" data-anijs="if: dblclick, do: rubberBand animated"></div> |
4 |
<div class="purple box" data-anijs="if: mousemove, do: shake animated"></div> |
5 |
<div class="black box" data-anijs="if: mouseover, on: body div.green, do: flash animated"></div> |
6 |
<div class="green box" data-anijs="if: mouseover, on: div.brown, do: fadeIn animated"></div> |
7 |
<div class="yellow box" data-anijs="if: dblclick, on: body, do: bounce animated"></div> |
8 |
<div class="brown box" data-anijs="if: click, on: div, do: wobble animated"></div> |
En cada caso, todo lo que tienes que hacer es escribir las declaraciones dentro del atributo data-anijs y la biblioteca se encargará del resto. (Hemos omitido la parte to en todas estas animaciones para que la animación se aplique en el elemento dentro del cual hemos especificado el atributo data-anijs).
Los últimos cuatro cuadros tienen valores diferentes para la parte on. Esto significa que la animación en el cuadro verde ocurrirá solamente cuando el mouse se mueva sobre el cuadro marrón. Del mismo modo, la animación de rebote en el cuadro amarillo empezará a reproducirse cada vez que un usuario haga doble clic en cualquier lugar dentro del cuerpo.
Puedes probar estas animaciones tú mismo en la demostración integrada de CodePen.
Manipulando clases y elementos de HTML
AniJS te permite hacer más que simplemente animar diferentes elementos. Por ejemplo, puede utilizarlo para agregar, eliminar o alternar clases aplicadas en diferentes elementos. Asimismo, también puedes eliminar elementos HTML o clonarlos sin añadir una sola línea de JavaScript. La biblioteca también te permite recorrer el DOM usando palabras clave reservadas especiales.
Empecemos con la manipulación de las clases. AniJS tiene tres palabras clave reservadas para manipular clases. Estas son $addClass, $removeClass y $toggleClass. Como su nombre indica, puedes usarlas para añadir, eliminar y alternar una o varias clases de un elemento, respectivamente. Todo lo que tienes que hacer es especificar los nombres de las clases después de las palabras clave reservadas.
De la misma manera, puedes usar palabras clave reservadas como $parent, $ancestors, $closest, $find y $children para recorrer el DOM.
Puedes utilizar estos dos conjuntos de palabras clave reservadas para hacer algo, como añadir una determinada clase a todos los elementos children de un elemento, después de que un visitante haga doble clic en ese elemento en particular. Sin embargo, los elementos children a los que te estás refiriendo pueden ser ambiguos en ciertos casos. Por ejemplo, puedes establecer el atributo data-anijs en un elemento, pero establecer el valor de la parte On en algo más usando los selectores de CSS. En esta situación específica, AniJS no tendrá forma de saber si la clase debe añadirse a los elementos children del elemento referido por el selector de CSS o al elemento en el que ha aplicado el atributo data-anijs. En tales casos, puedes eliminar la ambigüedad usando otra palabra clave reservada llamada target. Aquí, target se refiere al elemento señalado por el selector de CSS.
Examina los siguientes tres ejemplos en los que se ha usado AniJS para alternar clases de diferentes elementos:
1 |
<div class="box" |
2 |
data-anijs="if: click, |
3 |
do: $toggleClass orange"></div> |
4 |
|
5 |
<div class="box second" |
6 |
data-anijs="if: click, |
7 |
do: $toggleClass red,
|
8 |
to: $children"> |
9 |
<span class="shells"></span> |
10 |
<!-- Many more span tags -->
|
11 |
<span class="shells"></span> |
12 |
</div>
|
13 |
|
14 |
<div class="box" |
15 |
data-anijs="if: click, |
16 |
on: .shells,
|
17 |
do: $toggleClass yellow,
|
18 |
to: $parent target;
|
19 |
if: click,
|
20 |
on: .shells,
|
21 |
do: $toggleClass yellow,
|
22 |
to: $parent"></div> |
En el ejemplo anterior, he reformateado el HTML para que sea más fácil de leer y ver lo que ocurre.
Empecemos con el primer div. En este caso, hemos omitido tanto la parte on como la parte to del valor del atributo data-anijs. Por tal motivo, las dos se adaptan de manera predeterminada al div actual. Si intentas hacer clic en este div en particular, alternará la clase orange, que a su vez cambia el cuadro a naranja.
En el caso del segundo div, le estamos indicando a AniJS que cambie la clase llamada red para todos los elementos que son children de ese div en particular. Esto rotará todos los elementos span children, así como también cambiará su color a red mientras se establece el radio del borde a cero.
Hemos suministrado dos declaraciones diferentes dentro del atributo data-anijs del tercer div. Ambas declaraciones cambian la misma clase yellow. No obstante, los efectos son completamente diferentes debido al uso de la palabra clave target.
En el primer caso, hemos añadido la palabra clave target después de la palabra clave $parent. Esto le indica a AniJS que queremos cambiar la clase para el padre de los elementos señalados por la clase shells. En el segundo caso, hemos omitido la palabra clave target, por lo que AniJS cambia el fondo del padre del div actual. Como el padre del div es el propio body, toda la página se vuelve amarilla.
En la demostración integrada de CodePen, puedes probar haciendo clic en diferentes elementos y ver cómo afectan a la página.
Una cosa más que cabe señalar es que aunque el atributo data-anijs para el tercer cuadro tiene dos declaraciones, al hacer clic en el cuadro no tiene ningún efecto. Esto sucede porque le hemos dado instrucciones a Anijs para que escuche los eventos de clic en los elementos span con clase shells en ambos casos.
Otras maneras de manipular el HTML
Otra manera de manipular los elementos HTML en una página web con AniJS, sería clonarlos o eliminarlos. La biblioteca ha reservado las palabras clave $remove y $clone que indicarán si quieres eliminar un elemento o clonarlo.
Puedes pasar varios selectores a $remove para eliminar varios elementos de la página web. Ten en cuenta que los diferentes selectores de CSS se deben separar con la barra vertical |.
La palabra clave $clone también acepta dos parámetros. El primero es el selector de CSS para especificar el elemento que quieres clonar. El segundo es un número para especificar cuántas copias quieres hacer. Por ejemplo, $clone .shells|10 creará 10 copias de los elementos con la clase shells y las añadirá como elementos children del elemento en el que se ha especificado el atributo data-anijs. Si las copias tienen que agregarse a un elemento diferente, puedes dirigir a AniJS especificando el selector CSS apropiado después de to en la declaración AniJS.
Conclusión
El propósito de este tutorial es ayudarte a empezar con AniJS lo más rápido posible. Como habrás notado, la biblioteca es muy fácil de usar. Todo lo que debes hacer es especificar los valores correctos de los atributos y AniJS se encargará de todo lo demás, como cambiar clases, manipular el DOM y la animación de cualquier cambio.
La biblioteca ofrece muchas otras funciones que no hemos tratado en este tutorial. Puedes consultar la documentación oficial para conocer más sobre ella y utilizarla en todo su potencial.
