🤳 👩🏽‍🏫 🚣🏾 Percebemos um efeito interessante usando o Anime.js 🌭 💃🏿 🐣

Bom dia amigos

Neste artigo, como o nome indica, implementaremos um efeito interessante usando uma biblioteca interessante ( anime.js ). Não cantarei louvores a esta biblioteca, mas aqueles que estão ocupados com animação devem definitivamente prestar atenção nela. Interface simples + excelente documentação, o que mais é necessário para a criatividade?

Com base nos materiais deste maravilhoso artigo.

O autor deste artigo chamou seu efeito de "Animação de trilhas de partículas".

Vamos pegar o código do artigo, analisá-lo em detalhes e aprimorá-lo um pouco.

Primeiro, deixe as partículas coloridas. Porque uma cor é chata.

Em segundo lugar, a animação começará por clique. Porque a animação sem fim é irritante.

Em terceiro lugar, anexamos o centro da animação (espiral) ao local do clique. Porque a experiência do usuário vem em primeiro lugar.

Não usaremos lona. Muitos blocos pequenos (divs) serão animados.

Então, vamos lá (como disse Gagarin, indo para o espaço).

De que é composto o nosso HTML? Nele, conectamos a biblioteca, nosso script e, de fato, tudo.

Os estilos também não são impressionantes:

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

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

Dê JavaScript! Como quiser.

Envolvemos todo o nosso código em um manipulador de eventos click do objeto Window:

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

Crie um contêiner para partículas com a classe "box":

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

Determinamos alguns valores (não números mágicos, não se preocupe, seja feliz):

//     
let n = 10

//   
//     
let a = 20

//  
//      
let l = 110

Geramos partículas usando dois para loops:

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: #${     }`)
    }
}

A função para obter uma cor arbitrária pode ser assim:

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

Mas não estamos procurando maneiras fáceis, então será assim:

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

Ele usa um deslocamento à esquerda bit a bit e converte em uma sequência hexadecimal.

Em seguida, as partículas que criamos são 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, mas não menos importante, adicione ao início a verificação da presença da caixa:

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

Resultado:

Código do GitHub .

Isso é tudo, pessoal! Obrigado pela atenção.

Percebemos um efeito interessante usando o Anime.js

More articles: