✍🏻 🤜🏾 👨‍🎨 Nos damos cuenta de un efecto interesante usando Anime.js 🛢️ 🤑 🐾

¡Buen dia amigos!

En este artículo, como su nombre lo indica, implementaremos un efecto interesante usando una biblioteca interesante ( anime.js ). No voy a cantar alabanzas a esta biblioteca, pero aquellos que están ocupados con la animación definitivamente deberían prestarle atención. Interfaz simple + excelente documentación, ¿qué más se necesita para la creatividad?

Basado en los materiales de este maravilloso artículo.

El autor de este artículo llamó a su efecto "Particle Trail Animation".

Tomaremos el código del artículo, lo analizaremos en detalle y lo mejoraremos un poco.

Primero, haz que las partículas sean coloridas. Porque un color es aburrido.

En segundo lugar, la animación comenzará con un clic. Porque la animación sin fin es molesta.

En tercer lugar, adjuntamos el centro de la animación (espiral) al lugar del clic. Porque la experiencia del usuario es lo primero.

No usaremos lienzo. Muchos bloques pequeños (divs) serán animados.

Entonces, vamos (como dijo Gagarin, yendo al espacio).

¿De qué está compuesto nuestro HTML? En él, conectamos la biblioteca, nuestro script y, de hecho, todo.

Los estilos tampoco son impresionantes:

body {
    margin: 0;
    background: #333;
    overflow: hidden;
}

/*   */
.dot {
    position: absolute;
    /*   */
    border-radius: 50%;
}

¡Dale JavaScript! Como desées.

Envolvemos todo nuestro código en un controlador de eventos click del objeto Window:

window.addEventListener('click', event => {  ... })

Cree un contenedor para partículas con la clase "caja":

let box = document.createElement('div')
box.classList.add('box')
document.body.appendChild(box)

Determinamos algunos valores (no números mágicos, no te preocupes, sé feliz):

//     
let n = 10

//   
//     
let a = 20

//  
//      
let l = 110

Generamos partículas usando dos bucles for:

for (let i = 0; i <= l; i++) {
    //  
    let angle = 0.1 * i

    //     
    let x = (a * angle) * Math.cos(angle) + event.clientX
    let y = (a * angle) * Math.sin(angle) + event.clientY

    //  n    
    for (let j = 0; j < n; j++) {
        //     "dot"
        let dot = document.createElement('div')
        dot.classList.add('dot')
        box.appendChild(dot)

        //       "anime.random()"
        //    
        //   
        let size = anime.random(5, 10)

        //  
        //   "style"
        dot.setAttribute('style',
        //    ()  
        //  
        `width: ${size}px; height: ${size}px;

        //    anime.random()
        top: ${y + anime.random(-15, 15)}px; left: ${x + anime.random(-15, 15)}px;

        //      
        opacity: 0;

        //        
        background: #${     }`)
    }
}

La función para obtener un color arbitrario puede verse así:

function getRandomColor() {
    let letters = '0123456789abcdef',
        color = '#'
    for (let i = 0; i < 6; i++) {
        color += letters[Math.trunc(Math.random() * 16)]
    }
    return color
}

Pero no estamos buscando formas fáciles, por lo que se verá así:

(Math.random()*0xffffff<<0).toString(16)

Utiliza un desplazamiento a la izquierda bit a bit y se convierte en una cadena hexadecimal.

A continuación, las partículas que creamos están animadas usando anime:

anime({
    //  
    targets: document.querySelectorAll('.dot'),
    // 
    loop: false,
    //   
    //     ()
    easing: 'linear',

    //  
    // 
    //    
    opacity: [
        {
            value: 1,
            // 
            duration: 50,
            // 
            delay: anime.stagger(2)
        },
        {
            value: 0,
            duration: 1200
        }
    ],

    //   ()
    // 
    width: {
        value: 2,
        duration: 500,
        delay: anime.stagger(2)
    },
    // 
    height: {
        value: 2,
        duration: 500,
        delay: anime.stagger(2)
    },

    //  
    //    
    translateX: {
        value: () => anime.random(-30, 30),
        duration: 1500,
        delay: anime.stagger(2)
    },
    //    y
    translateY: {
        value: () => anime.random(-30, 30),
        duration: 1500,
        delay: anime.stagger(2)
    }
})

Por último, pero no menos importante, agregue al principio la marca de verificación de la presencia de la casilla:

if (document.querySelector(".box")) {
    document.body.removeChild(document.querySelector(".box"));
  }

Resultado:

GitHub código .

¡Eso es todo amigos! Gracias por su atención.

Nos damos cuenta de un efecto interesante usando Anime.js

More articles: