Ledakan! Memeriksa Ledakan dalam Desain Web

Ada banyak cara untuk menarik perhatian audiens. Kita dimanjakan dengan pilihan, meski kondisi teknologi saat ini masih belum sempurna. Kami mengalami beberapa masalah kompatibilitas browser, dan tidak setiap perangkat dapat menangani semua solusi muluk yang diberikan pengembang web kepada kami.

Namun demikian, hari-hari situs web statis di mana gambar adalah kekuatan pendorong utama dan slider dengan transisi mewah adalah satu-satunya bumbu telah hilang. Kita sedang menyaksikan era ide dan ekstravaganza yang berani.

Di antara aspek terbesarnya adalah pengembang tidak membatasi fokus mereka pada hal-hal besar. Ya, kita dapat melihat banyak animasi kanvas, VR luar biasa, dan eksperimen video yang memerlukan mode layar penuh, dll. Namun, hari ini bahkan detail terkecil pun mendapat perhatian tersendiri.

Situs web penuh dengan solusi mikroskopis, terutama yang didasarkan pada kursor mouse. Kita dapat menemukan banyak ide cerdas. Mereka fantastis, tetapi dalam kebanyakan kasus mereka (apa kata yang saya cari?), "tenang". Saya tidak berbicara tentang mereka membuat suara karena beberapa solusi berbasis mouse benar-benar mengeluarkan suara. Saya berbicara tentang perilaku mereka.

Tingkah laku mereka halus, tenang dan lembut. Dalam beberapa kasus, sangat mulus sehingga hampir tidak terlihat. Dan jika Anda terlalu terlibat dengan konten atau ada beberapa elemen lain yang mengganggu, kemungkinan Anda bahkan dapat mengabaikannya. Jadi, mengapa tidak membuatnya sedikit "lebih keras", sehingga pengguna tidak akan melewatkan kesempatan untuk menikmatinya?

Bagaimana melakukan ini, Anda mungkin bertanya. Saya punya satu solusi bagus: buat semuanya meledak – secara harfiah dan kiasan.

Partikel di luar angkasa oleh Dean Wagman

Ambil, misalnya, cuplikan kode fantastis yang dibuat oleh Dean Wagman ini. Meski ini merupakan eksperimen kanvas pertama yang dilakukan Dean, namun sangat menginspirasi. Yang perlu Anda lakukan hanyalah mengeklik di mana saja di layar, dan Anda akan melihat ledakan ratusan partikel kecil yang terang terbang tepat di depan wajah Anda. Meski tidak bersuara, tentu terasa riuh.

Lihat Pena
Partikel di luar angkasa oleh Dean Wagman (@deanwagman).

Efek ledakan selalu membangkitkan perasaan bahwa sesuatu yang keras telah terjadi. Jadi, mengapa tidak menggunakan ini untuk keuntungan kita dan menambahkan beberapa kebisingan tanpa membuat suara yang sebenarnya? Terlebih lagi, kami memiliki pilihan cuplikan kode yang fantastis di sini. Mari kita jelajahi bersama.

Ledakan partikel oleh Aleksei / Kaboomerz oleh Christopher Lis

Jika solusi oleh Dean Wagman terlihat terlalu berlebihan, Anda selalu dapat mencoba ledakan Partikel oleh Aleksei. Atau jika, sebaliknya, Anda perlu membuat dampak yang lebih signifikan, Anda selalu dapat mengadopsi Kaboomerz oleh Christopher Lis.

Cuplikan kode pertama menampilkan versi "adik laki-laki" dari ledakan Dean, di mana puluhan partikel kecil membentuk ledakan kecil yang dengan cepat muncul dan mati. Dalam kasus Christopher Lis, Anda akan terkejut dengan ukuran partikelnya. Konfeti yang muncul dari kursor mouse sangat besar. Namun, berkat umurnya yang pendek, efek keseluruhannya tidak berlebihan. Itu hanya menyenangkan.

Lihat Pena
Ledakan partikel JS/CSS3 oleh Aleksei (@alek).

Lihat Pena
#Codevember 5 – Kaboomerz oleh Christopher Lis (@chriscourses).

Ledakan DOM oleh David A.

Jika Anda menyukai ide ini tetapi membutuhkan sesuatu yang lebih seperti digital dan terinspirasi retro, maka ada solusi luar biasa yang dibuat oleh David. Dia menggunakan persegi panjang dengan berbagai ukuran alih-alih lingkaran untuk mencapai sentuhan 8-bit yang indah. Hasilnya, kita bisa menyaksikan ledakan kecil dengan karisma tahun 80-an.

Lihat Pena
Ledakan DOM oleh David A. (@meodai).

WebGL Berkilau oleh CreateJS

Jika Anda mencari versi realistis, WebGL Sparkles oleh CreateJS adalah contoh sempurna untuk dipertimbangkan. Meskipun semua partikel di sini berwarna putih, berkat perilaku yang dipikirkan dengan matang, ini terlihat seperti tembakan perayaan yang nyata saat Anda mengklik layar. Terlebih lagi, kursor memiliki jejak indah yang memberikan sentuhan ajaib pada pemandangan.

Lihat Pena
CreateJS: WebGL Berkilau oleh CreateJS (@createjs).

Peluncur Kembang Api Otomatis oleh Christopher Lis

Omong-omong, koleksi ledakan kami tidak akan lengkap tanpa dosis kegilaan kembang api. Peluncur Kembang Api Otomatis oleh Christopher Lis adalah contoh fantastis untuk dipertimbangkan. Ini adalah peluncur kembang api kartun. Berkat partikel warna-warni dan bentuk seperti anyelir, ini mengingatkan kita pada kembang api asli yang menerangi langit berbintang.

Lihat Pena
Hari 29 – Peluncur Kembang Api Otomatis oleh Christopher Lis (@chriscourses).

Konsep penghancuran jendela modal oleh LegoMushroom

Eksperimen kanvas bukan satu-satunya yang ada dalam daftar kami. Efek ledakan dapat diterapkan ke berbagai elemen antarmuka, seperti jendela modal. LegoMushroom memiliki bukti nyata akan hal itu. Lihatlah konsep jendela modal mereka. Ketika Anda menutup jendela, bukannya menghilang begitu saja, itu pecah menjadi beberapa bagian. Ini adalah tambahan yang sempurna untuk semua situs web berilustrasi mewah yang cukup populer akhir-akhir ini.

Lihat Pena
Konsep penghancuran jendela modal oleh LegoMushroom (@sol0mka).

Efek Ledakan SCSS oleh Sylvain Garnot / Ledakan teks SVG oleh Kacper Bawol / Ledakan teks kanvas oleh Tim Horwood

Efek ledakan dapat bermanfaat untuk tipografi juga. Pertimbangkan Efek Ledakan SCSS oleh Sylvain Garnot, ledakan teks SVG oleh Kacper Bawol dan ledakan teks Canvas oleh Tim Horwood.

Ketiganya menunjukkan efek ledakan yang diterapkan pada teks. Bisa ditebak, kursor mouse memicu masing-masing.

Sylvain Garnot memungkinkan pengguna meledakkan setiap huruf menjadi seratus kotak kecil. Konsep Kacper Bawol terlihat hampir sama, namun kali ini simbolnya pecah menjadi segitiga kecil. Dan, Tim Horwood memungkinkan pengguna untuk meledakkan seluruh teks menjadi partikel kecil yang akhirnya kembali dan mengembalikan semuanya ke keadaan semula. Ketiga ide itu sangat luar biasa.

Lihat Pena
SCSS – Efek Ledakan oleh sylvain garnot (@sylvaingarnot).

Lihat Pena
Ledakan teks SVG oleh Kacper Bawol (@Casperovic).

Lihat Pena
Ledakan teks kanvas, klik untuk melihat oleh Tim Horwood (@tdhorwood).

Rumah Ledakan oleh Ko.Yelie

Efek ledakan juga dapat diterapkan pada gambar. Konsep oleh Ko.Yelie ini adalah contoh yang bagus. Dengan mengklik gambar, Anda meledakkannya menjadi potongan-potongan kecil. Meskipun sulit untuk menemukan aplikasi untuk ini dalam antarmuka kehidupan nyata, selalu bagus untuk memiliki beberapa solusi luar biasa di ujung jari Anda yang dapat membuat hal-hal umum terlihat unik.

Lihat Pena
Rumah Ledakan oleh Ko.Yelie (@ko-yelie).

Fitur Peledak

Efek ledakan adalah alat yang kontroversial. Itu tidak cocok untuk setiap antarmuka di luar sana karena sifatnya yang "meledak" dan karisma yang kuat. Meskipun tampaknya tidak berbahaya dan bahkan netral ketika diterapkan bersama-sama dengan kursor mouse, itu cukup "keras" – jadi Anda harus berhati-hati.

Ingat, tidak semua orang mencari hiburan dari situs web. Dan tidak semua orang menyukai ekstravaganza dan kesan yang luar biasa. Pada akhirnya, konten selalu menjadi raja.

Namun, jika Anda mencari beberapa cara yang tidak biasa untuk membuat interaksi pengguna yang menarik yang menyenangkan dan bisa dikatakan "keras", maka efek ledakan pasti bisa berguna.