10 Contoh Animasi Partikel yang Indah dalam Desain Web

Mengambil Web dengan badai, animasi partikel berhasil mengukir cukup ceruk untuk diri mereka sendiri beberapa tahun yang lalu. Obsesi besar-besaran saat ini dengan desain yang memiliki getaran teknologi tinggi dan dekorasi geometris menjadikannya salah satu solusi yang paling dicari saat ini.

Biasanya, animasi partikel dapat dilihat di bagian pahlawan seperti, misalnya, di JetUp Digital.

Seperti yang Anda lihat, ini adalah cara yang elegan untuk menambahkan bumbu tertentu pada kesan pertama, sambil dengan hati-hati dan tidak mencolok memisahkan situs web dari keramaian.

Untuk mereproduksi efek ini, langkah pertama Anda adalah partikel.js.

Ini adalah plugin ringan oleh Vincent Garreau yang merupakan jantung dan jiwa dari sebagian besar animasi partikel di luar sana. Terlebih lagi, dalam keadaan aslinya, ini adalah salah satu solusi yang paling banyak disalin di web – meskipun mungkin tidak dengan intensitas tinggi seperti dalam contoh penulis.

Umumnya, pengembang lebih menyukai varian yang lebih rapi, sederhana, dan tenang. Misalnya, lihat Canvas Particles oleh Romswell Roswell Parian Paucar. Ini adalah kombinasi partikel dan paralaks yang menghasilkan estetika yang menarik dan dinamis.

Namun demikian, bukan berarti pendekatan tersebut terbatas pada realisasi semacam ini saja. Pertimbangkan Partikel dalam ruang oleh Dean Wagman, sistem partikel CSS saja oleh Robin Selmer dan, tentu saja, efek dorong menjauh dengan terampil direproduksi dan ditampilkan dalam codepen Alex Safayan. Sementara konsep oleh Robin Selmer hanyalah bagian yang menyenangkan untuk ditonton; dua lainnya membutuhkan interaksi pengguna, dan itu selalu menarik.

Menggunakan Animasi Partikel untuk Mengesankan

Seiring berjalannya waktu, teknik tersebut semakin matang. Dari kekacauan titik-titik putih kecil yang tersebar di seluruh kanvas, itu berubah menjadi alat dengan potensi besar. Ini bukan sesuatu yang luar biasa, namun memiliki faktor wow tertentu. Selain itu, ini memberikan kontribusi sempurna pada estetika teknologi tinggi, geometris, dan bisnis – menyelesaikannya secara alami.

Premisnya adalah: animasi partikel harus mengesankan. Dan, pengembang tetap berpegang pada postulat ini melalui tebal dan tipis, memanfaatkannya sebaik mungkin. Mari kita pertimbangkan beberapa cuplikan kode fenomenal yang dibuat oleh penggemar nyata dari solusi ini.

30.000 Partikel oleh Justin Windle

Di sini judul berbicara untuk dirinya sendiri. Dengan 30.000 partikel di dalamnya, Anda mengharapkan sesuatu yang muluk-muluk. Dan Justin Windle tentu memenuhi harapan kami. Konsepnya luar biasa. Gunakan mouse Anda untuk bermain-main. Fisika hanya luar biasa. Versi animasi partikel ini cukup populer di kalangan pengembang, meski tidak dalam skala yang begitu monumental.

Ikan di Air oleh Alex Safayan

Alex Safayan memberikan solusi yang hampir sama, tetapi dalam kasus ini, partikel semakin membesar. Kursor mouse juga mendorong titik-titik, membentuk jejak dengan efek riak halus. Perilaku animasi ini mengingatkan pada gerakan ikan saat mendekati permukaan air. Perhatikan fisika: interaksi antara titik-titik sudah dipikirkan dengan matang.

PLANKTON – Kehidupan partikel oleh Marco Dell'Anna

Setelah mendapat penghargaan untuk proyek paling hati tahun 2017, Plankton tentu patut mendapat perhatian. Proyek ini memikat tidak hanya dengan idenya tetapi juga dengan realisasinya. Dari pewarnaan halus yang pas di sini seperti sarung tangan hingga perilaku luar biasa yang terlihat sangat alami, Marco Dell'Anna memperhatikan detail.

STARDUST oleh Marco Dell'Anna

Saya suka getaran retro yang luar biasa, sentuhan neon, dan pewarnaan yang indah di sini. Sangat sulit untuk mengalihkan pandangan darinya. Stardust adalah simbiosis desain dan pengkodean yang menghasilkan sebuah mahakarya yang menginspirasi.

Poin Gravitasi oleh Akimitsu Hamamuro

Akimitsu Hamamuro mengundang Anda untuk menambahkan apa yang disebut "titik gravitasi" di taman bermainnya. Mereka menyusup ke dalam gerakan titik-titik yang kacau dan menariknya seperti magnet. Meskipun mereka tidak melakukan peran pusat orbit; namun mereka membentuk titik fokus yang memaksa partikel untuk bergerak ke arahnya.

Particle Orb CSS oleh Nate Wiley

Spheres adalah pilihan gaya yang cukup populer untuk area pahlawan akhir-akhir ini. Dan pendapat Nate Willey tentang tren ini cukup mengesankan. Bola itu terlihat rapuh berkat partikel kecil, dan pada saat yang sama, kokoh berkat perilaku yang dipikirkan dengan matang. Rutinitasnya menghancurkan dan membentuk kembali bola sangat fantastis.

Gelombang Partikel oleh Kevin Rajaram

Kevin Rajarm mengambil keindahan dan keanggunan animasi partikel dan menyempurnakannya dengan kehebatan Three.js, menghadirkan konsep yang halus namun benar-benar canggih. Pemandangan ombak yang menakjubkan terasa futuristik, artifisial, dan memesona.

Penggunaan yang Tidak Ortodoks

Bahkan ada cara yang lebih mengesankan dalam menggunakan animasi partikel. Mari kita keluar dari jalur dan berpikir out-of-the-box: pendekatan ini dapat dengan mudah menguntungkan elemen-elemen seperti logo dan huruf.

Logo Partikel Interaktif oleh Tamino Martinius

Logo Partikel Interaktif adalah contohnya. Sepertinya solusi yang dibayangkan ulang dari cuplikan Justin Windle yang ditampilkan di atas. Meskipun tidak ada 30.000 titik, itu terdiri dari jumlah partikel yang mengesankan yang dengan terampil membentuk kata "CODEPEN". Ini adalah salah satu kasus di mana konsep tersebut menemukan penggunaan praktis.

Teks ke partikel oleh Louis Hoebregts

Versi warna-warni dari solusi sebelumnya tersedia di pena ini oleh Louis Hoebregts. Di sini teks dibentuk oleh ribuan lingkaran padat warna-warni yang diperkaya oleh interaktivitas yang sama seperti pada contoh sebelumnya.

Partikel menulis teks oleh Marco Dell'Anna

Meskipun ini bukan pintu masuk yang dramatis, ada sesuatu yang mempesona di dalamnya. Animasi yang halus perlahan mengungkap karakter dan memicu minat kami. Konsepnya memiliki bakat misterius tertentu yang mirip dengan intro "Stranger Things".

JUST DO IT oleh Marco Dell'Anna

Ini adalah mahakarya lain dari Marco Dell'Anna. Kali ini, animasi partikel ikut ambil bagian dalam membentuk logotype Nike yang terkenal. Dari tidak jelas dan semi-transparan hingga tajam dan solid, animasi secara bertahap mengekspos logo, secara tidak mencolok menyita perhatian keseluruhan.

404 teks partikel oleh enrico toniato

Jika Anda berpikir bahwa satu-satunya penggunaan praktis animasi partikel adalah memperkaya bagian pahlawan, maka Enrico Toniato akan membuktikan bahwa Anda salah. Pandangannya tentang halaman kesalahan sangat brilian. Ikuti idenya dan gunakan partikel yang bergerak untuk menyelamatkan halaman 404 agar tidak terlihat membosankan dan menjijikkan.

Efek Menarik Perhatian

Animasi partikel adalah salah satu kasus di mana lebih kecil lebih baik. Semakin kecil titiknya, semakin mengesankan efek yang dapat dicapai. Di satu sisi, itu terlihat canggih dan rumit karena geometri dan fisika terlibat. Di sisi lain, itu terlihat rapuh dan halus berkat bentuknya yang halus. Fusi unik ini membuat animasi partikel menjadi luar biasa dan menarik perhatian.