😓 🗣️ 👩‍🍳 Nous réalisons un effet intéressant en utilisant Anime.js 🏁 🖋️ ⏱️

Bonjour mes amis!

Dans cet article, comme son nom l'indique, nous allons implémenter un effet intéressant en utilisant une bibliothèque intéressante ( anime.js ). Je ne ferai pas l'éloge de cette bibliothèque, mais ceux qui sont occupés à l'animation devraient certainement y prêter attention. Interface simple + excellente documentation, que faut-il d'autre pour la créativité?

Basé sur les matériaux de ce merveilleux article.

L'auteur de cet article a appelé son effet «Particle Trail Animation».

Nous allons prendre le code de l'article, l'analyser en détail et l'améliorer un peu.

Tout d'abord, rendez les particules colorées. Parce qu'une couleur est ennuyeuse.

Deuxièmement, l'animation commencera par un clic. Parce que l'animation sans fin est ennuyeuse.

Troisièmement, nous attachons le centre de l'animation (spirale) à l'endroit du clic. Parce que l'expérience utilisateur passe avant tout.

Nous n'utiliserons pas de toile. De nombreux petits blocs (divs) seront animés.

Alors, allons-y (comme l'a dit Gagarine, aller dans l'espace).

De quoi est composé notre HTML? Nous y connectons la bibliothèque, notre script et, en fait, tout.

Les styles sont également à peine impressionnants:

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

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

Donnez JavaScript! Comme vous le souhaitez.

Nous enveloppons tout notre code dans un gestionnaire d'événements click de l'objet Window:

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

Créez un conteneur pour les particules avec la classe "box":

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

Nous déterminons certaines valeurs (pas des nombres magiques, ne vous inquiétez pas, soyez heureux):

//     
let n = 10

//   
//     
let a = 20

//  
//      
let l = 110

Nous générons des particules en utilisant deux boucles 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 fonction pour obtenir une couleur arbitraire peut ressembler à ceci:

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

Mais nous ne cherchons pas de moyens faciles, cela ressemblera à ceci:

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

Il utilise un décalage gauche au niveau du bit et transtypé en une chaîne hexadécimale.

Ensuite, les particules que nous avons créées sont animées à l'aide d'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)
    }
})

Enfin, ajoutez au début la vérification de la présence de la boîte:

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

Résultat:

Code GitHub .

C'est tout, les amis! Merci de votre attention.

Nous réalisons un effet intéressant en utilisant Anime.js

More articles: