Anime.js es una biblioteca de JavaScript liviana con una API simple y pequeña y poderosa. Funciona con el elemento DOM, CSS y objeto JavaScript.
requisitos previos:
Instalación de anime.js: hay dos formas de usar anime.js en su proyecto:
- Puede descargar el archivo anime.min.js y usarlo directamente.
- Simplemente busque en Google anime.js CDN y obtendrá el enlace y simplemente colóquelo en su etiqueta de secuencia de comandos como se muestra a continuación.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
Propiedades básicas utilizadas en anime.js:
- objetivos: los selectores Css para apuntar e identificar en qué animación se debe aplicar.
- duración: Tiempo en milisegundos que debe durar la animación.
- retraso: Tiempo en milisegundos después del cual comienza la animación.
- translateX: coloca el elemento en esa coordenada x.
- translateY: coloca el elemento en la coordenada Y.
- offset: Esto da retraso entre diferentes animaciones. es decir, para iniciar otra animación después de x segundos de la anterior.
Creación de una aplicación y estructura de proyecto: esta es una página web simple. Todo lo que tenemos que hacer es crear un proyecto y dentro de él crear un archivo HTML llamado index.html .
mkdir animation && cd animation touch index.html
Ejemplo 1:
índice.html
HTML
<!DOCTYPE html> <html> <head> <title>A nice example for timeline</title> <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> </script> <style> html{ min-height: 200vh; } .ball { width: 60px; height: 60px; margin-top: 120px; margin-left:200px; border-radius: 50%; background-color: pink; float: left; } </style> </head> <body> <body> <div class="ball first"></div> <div class="ball second"></div> <div class="ball third"></div> <script> let animation = anime.timeline({ duration: 500, easing: 'easeInOutSine', direction: 'alternate', autoplay:false, loop: true }); animation.add({ targets: '.first', translateY: -50, backgroundColor: 'rgb(255, 0, 0)' }).add({ targets: '.second', translateY: -50, backgroundColor: 'rgb(0, 255, 0)' }).add({ targets: '.third', translateY: -50, backgroundColor: 'rgb(0, 0, 255)' }); window.onscroll=()=>{ animation.play(); } </script> </body> </html>
Salida: haga clic en index.html para abrirlo en el navegador:
Ejemplo 2: en este ejemplo, la propiedad translateX se vuelve más clara. Primero se traduce en -ve eje x y luego en +ve eje x.
índice.html
HTML
<!DOCTYPE html> <html> <head> <title>A nice example for timeline</title> <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> </script> <style> html{ min-height:200vh; } .ball { width: 200px; height: 200px; margin-top: 120px; margin-left:200px; background-color: pink; float: left; } </style> </head> <body> <body> <div class="ball first"></div> <div class="ball second"></div> <div class="ball third"></div> <script> let animation = anime.timeline({ duration: 400, easing: 'easeInOutSine', direction: 'alternate', autoplay:false, loop: true }); animation.add({ targets: '.first', translateX: [-100,100], backgroundColor: 'rgb(255, 0, 0)', }).add({ targets: '.second', translateX: [-100,100], backgroundColor: 'rgb(0, 255, 0)', }).add({ targets: '.third', translateX: [-100,100], backgroundColor: 'rgb(0, 0, 255)', }); window.onscroll=()=>{ animation.play() } </script> </body> </html>
Salida: Haga clic en el archivo index.html para abrirlo en el navegador.
Publicación traducida automáticamente
Artículo escrito por namancourses y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA