🏟️ 👍🏽 👩🏼‍🏭 Kami menyadari efek menarik menggunakan Anime.js ⏱️ 🤯 👩🏻‍⚕️

Selamat siang teman!

Dalam artikel ini, seperti namanya, kami akan menerapkan satu efek menarik menggunakan satu perpustakaan penasaran ( anime.js ). Saya tidak akan menyanyikan pujian untuk perpustakaan ini, tetapi mereka yang sibuk dengan animasi pasti harus memperhatikannya. Antarmuka yang sederhana + dokumentasi yang luar biasa, apa lagi yang diperlukan untuk kreativitas?

Berdasarkan bahan ini artikel yang indah.

Penulis artikel ini menyebut efeknya "Particle Trail Animation".

Kami akan mengambil kode dari artikel, menganalisisnya secara terperinci dan memperbaikinya sedikit.

Pertama, buat partikelnya berwarna-warni. Karena satu warna itu membosankan.

Kedua, animasi akan dimulai dengan klik. Karena animasi tiada akhir menjengkelkan.

Ketiga, kami melampirkan pusat animasi (spiral) ke tempat klik. Karena pengalaman pengguna yang diutamakan.

Kami tidak akan menggunakan kanvas. Banyak blok kecil (div) akan dianimasikan.

Jadi, ayo pergi (seperti yang dikatakan Gagarin, pergi ke luar angkasa).

Terdiri dari apa HTML kita? Di dalamnya, kami menghubungkan perpustakaan, skrip kami dan, pada kenyataannya, semuanya.

Gaya juga hampir tidak mengesankan:

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

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

Berikan JavaScript! Sesuai keinginan kamu.

Kami membungkus semua kode kami dalam pengendali event klik dari objek Window:

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

Buat wadah untuk partikel dengan "kotak" kelas:

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

Kami menentukan beberapa nilai (bukan angka ajaib, jangan khawatir, bahagia):

//     
let n = 10

//   
//     
let a = 20

//  
//      
let l = 110

Kami menghasilkan partikel menggunakan dua untuk loop:

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

Fungsi untuk mendapatkan warna sewenang-wenang mungkin terlihat seperti ini:

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

Tapi kami tidak mencari cara mudah, jadi akan terlihat seperti ini:

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

Ini menggunakan shift kiri bitwise dan dilemparkan ke string heksadesimal.

Selanjutnya, partikel yang kita buat dianimasikan menggunakan 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)
    }
})

Terakhir, namun tidak kalah pentingnya, tambahkan ke awal centang untuk keberadaan kotak:

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

Hasil:

Kode GitHub .

Itu saja, semuanya! Terima kasih atas perhatian Anda.

Kami menyadari efek menarik menggunakan Anime.js

More articles: