Poof☁️! Jadikan Elemen Web Hilang Seperti Sihir dengan Teknik Kod Ini

Idea untuk mengalihkan Elemen Web daripada keadaan ke keadaan lain menggunakan kelegapan, skala, terjemah, malah keterlihatan dan paparan, telah menjadi sangat biasa dan lama, walaupun ia tidak begitu buruk, tetapi ia perlu bergerak ke hadapan, mengambil langkah baharu, menjadi sesuatu yang lain, dan hari ini saya memperkenalkan kepada anda kesan inspirasi seperti sihir yang menghilangkan elemen menggunakan apa-apa sahaja seperti huruf, segi empat tepat, bulatan, malah zarah sampel imej! (boleh bayangkan).

Jadi idea itu mengubah elemen kita menjadi sejenis bahagian, dan bahagian itu mungkin berasal daripadanya jika elemen teks seperti Tajuk ia akan menjadi huruf, dan jika ia imej ia akan menjadi sampel zarah berwarna, Sekarang CodePen ini di bawah menunjukkan konsep asas mencipta kesan:

Seperti yang anda lihat, contoh di atas menunjukkan bahawa bahagian-bahagian itu berpusat dan apabila ia dianimasikan, ia telah diubah daripada kedudukan berpusat ini kepada kedudukan rawak menggunakan fungsi utiliti seperti ini:

const rand = (min, max) => Math.floor(Math.random() * (max - min) + min)

Tetapi sekarang untuk mencapai Kesan Poof, kita perlu menyembunyikan elemen awal kita sebelum menghidupkan zarah, saya menggunakan skala untuk menyembunyikannya, penskalaan ini juga akan menjejaskan zarah kita, untuk mengelakkannya kita perlu cipta elemen untuk mengandungi zarah kami, dan elemen ini mestilah serupa dengan elemen awal kami, dan selepas kami animasi penskalaan elemen awal selesai dan animasi poofing setiap zarah zarah selesai, kami akan mengeluarkan elemen awal bersama-sama dengan unsur yang mengandungi zarah kita

Perhatikan bahawa saya telah mencipta 2 tatasusunan, satu untuk zarah "bahagian yang dinamakan", dan satu untuk animasi, tatasusunan kedua ini akan dihantar kepada kaedah Promise.all untuk mengetahui penamat animasi tanpa menggunakan hard- setTimouts berkod

  const div = document.querySelector("div");
        let parts = [];
        let animations = [];

return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })

Apa yang boleh berlaku jika kita meletakkan zarah kita secara mutlak dalam bentuk seperti grid dan bukannya dalam kedudukan berpusat, dan borang ini akan berada dalam baris dan lajur, menggunakan gelung utama untuk meletakkan baris dan bersarang untuk gelung ke kedudukan lajur

Kesan telah selesai! tetapi bagaimana pula dengan menggunakan imej awan dan bukannya segi empat tepat berwarna, malah mewarnakannya dengan warna elemen awal, menggunakan 2 imej latar belakang bertindan satu ialah kecerunan linear warna elemen awal, kedua ialah imej sebenar awan, kemudian gunakan mod campuran latar belakang darab, bersama-sama dengan menutup unsur zarah dengan imej topeng awan

                    --cloud: 
url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `

Seperti yang saya katakan dalam artikel pertama, bahawa terdapat kesan poof untuk imej yang menggunakan pikselnya untuk sampel warna daripadanya dan kemudian menggunakan warna ini untuk zarah, Jadi kesan poof untuk imej ini akan menjadi artikel kami yang akan datang

Jika anda datang ke sini, ini bermakna anda telah selesai membaca, dan mempunyai semacam obsesi dengan perkara seperti ini, Jadi tunjukkan dengan menjatuhkan suka/cinta ❤️.

Ikuti saya untuk lebih lanjut ?✅
dev.to
twitter/X
linkedin

Atas ialah kandungan terperinci Poof☁️! Jadikan Elemen Web Hilang Seperti Sihir dengan Teknik Kod Ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!