Serangan Latar Belakang Animasi Berbasis Gumpalan dalam Desain Web

Latar belakang animasi adalah fitur populer dari situs web modern. Bukan lagi tren atau sesuatu yang luar biasa. Ini hanyalah salah satu cara yang layak untuk menghiasi area pahlawan akhir-akhir ini. Meskipun masih ada masalah dengan kompatibilitas browser, solusinya telah berhasil mengukir ceruk untuk dirinya sendiri.

Ada berbagai jenis animasi. Anda dapat menemukan:

• animasi partikel;
• Animasi kaleidoskopik;
• Animasi 3D abstrak;
• Animasi geometris yang halus, dan banyak lagi.

Sementara beberapa tahun yang lalu animasi partikel yang diilhami konstelasi berkuasa, saat ini animasi berbentuk gumpalan menggairahkan pikiran tim kreatif. Apa yang bisa kau lakukan? Perilaku cairan tak tertahankan. Rutinitas morphing yang menunjukkan bagaimana penurunan besar dengan mulus bergerak di ruang angkasa dengan mudah memenangkan audiens online dan menempatkan situs web Anda di depan.

Untuk memanfaatkan teknik arus utama ini, kami menawarkan koleksi cuplikan kode luar biasa yang akan memberi Anda petunjuk tentang cara membuat animasi berbentuk gumpalan Anda sendiri. Anda dapat melakukannya dengan alat tradisional atau baru. Sekarang, mari temukan pasangan yang cocok untuk proyek Anda berikutnya.

Animasi gumpalan oleh Uwe Chardon

Uwe Chardon mengambil solusi populer ini praktis dan menginspirasi. Ini fitur gumpalan datar sederhana dengan pewarnaan oranye yang indah dan tepi halus ditempatkan di lingkungan yang bersih. Dia berhasil meniru perilaku cairan dengan cukup baik.

Hasilnya adalah kombinasi yang unggul dari bentuk sederhana dan perilaku rumit yang terlihat cukup mengesankan.

Lihat animasi Pen Blob CSS murni oleh Uwe Chardon

Blob oleh Ashton Holgate

Contoh sebelumnya menggambarkan jenis gumpalan tradisional dengan bentuk tidak beraturan dan morphing yang relatif ekspresif. Namun, proyek oleh Ashton Holgate ini tetap pada bentuk yang lebih ilahi, yang hampir berbatasan dengan lingkaran, dan perubahannya hampir tidak terlihat. Namun demikian, itu juga terlihat luar biasa.

Terlebih lagi, artis juga telah bermain dengan teks, memaksanya untuk mengubah warnanya ke warna yang berlawanan ketika menyentuh area gelembung.

Lihat Blob Pena oleh Ashton Holgate

Memantulkan Liquid Loader oleh Fabio Ottaviani

Fabio Ottaviani telah mempraktikkan sifat menyenangkan dari perilaku lengket yang melekat pada animasi gumpalan. Gelembungnya kecil, namun menghasilkan dampak yang cukup besar dengan morphing yang menggemaskan dan pantulan yang lucu.

Meskipun papan nama proyek pena bertuliskan "Loader", itu dapat dengan mudah diubah menjadi detail dekoratif latar belakang. Dan untuk melakukan ini semua yang perlu Anda ketahui adalah HTML dan CSS, karena artis tidak menggunakan sihir JavaScript sama sekali. Pintar.

Lihat Pena Memantulkan Liquid Loader oleh Fabio Ottaviani

Tes Blob Kanvas oleh Shaw

Berbeda dengan contoh sebelumnya, penurunan ini murni dihasilkan oleh JavaScript. Jadi bersiaplah untuk menyelami solusi menarik dan permainan rumit dengan grafik. Terlebih lagi, konsepnya berbeda dari yang lain dengan tampilannya yang primitif, dengan perilaku yang cukup halus dan tenang yang menghadirkan suasana tenteram secara keseluruhan.

Ini cukup universal dan netral. Dengan demikian, ini bisa menjadi animasi latar belakang yang sempurna untuk banyak proyek.

Lihat Tes Blob Pena Kanvas oleh Shaw

Blob oleh Jeffrey

Solusi dari Jeffrey ini merupakan kombinasi yang unggul dari dua tren. Di sini, Anda dapat menemukan latar belakang jerawatan yang sangat populer akhir-akhir ini dan perilaku cair yang mendominasi opsi lainnya.

Cuplikan kode dibuat dengan HTML, CSS, dan JavaScript. Ini terlihat konsisten di berbagai browser dan perangkat. Seniman menggunakan algoritme pegas dasar yang membuat interaksi dengan gumpalan besar terasa nyata dan tidak dibuat-buat.

Perhatikan, meskipun gumpalan menempati setengah dari adegan, itu tidak mengalahkan penonton. Perilaku halus dan tenang berdiri di balik ketidakpedulian ini.

Lihat Blob Pena oleh Jeffrey

Gumpalan oleh Charlotte Dann

Jika satu gumpalan tidak cukup untuk menghasilkan kesan yang tepat, maka Anda selalu dapat memilih selusin. Charlotte Dann, dengan cuplikan kodenya yang cerdik, akan menunjukkan kepada Anda bagaimana melakukan ini tanpa merusak efek umum dan membuat pengunjung kewalahan.

Cuplikan kodenya hanya memanjakan mata. Ini menampilkan banyak gumpalan kecil yang bergerak yang berinteraksi satu sama lain. Masing-masing tampak seperti titik kecil cahaya. Bersama-sama, mereka membentuk satu gumpalan besar yang memancarkan kehangatan di semua lini.

Lihat Blobs Pena oleh Charlotte Dann

Sekarang, mari kita beralih dari dunia datar ke dunia 3 dimensi.

Blob oleh Georgi Nikoloff

Blob oleh Georgi Nikoloff adalah contoh kasus. Ini langsung menarik perhatian dengan pewarnaannya yang semarak, penampilan berteknologi tinggi, dan perilaku dinamisnya. Pengembang memanfaatkan teknologi canggih secara maksimal, menggunakan WebGL, GLSL, dan shader untuk keuntungannya. Meskipun solusinya tunduk pada kompatibilitas browser, itu terlihat menginspirasi.

Lihat gumpalan Pena oleh Georgi Nikoloff

Eksperimen #6 oleh Daniel Del Core

Daniel Del Core menunjukkan kepada penonton online cara bermain dengan noise Simplex dan merapikannya dengan beberapa tekstur yang direproduksi dengan hati-hati. Hasilnya adalah bola seperti cat yang terinspirasi permen. Meskipun bergerak cukup cepat, itu sangat memukau sehingga sulit untuk mengalihkan pandangan Anda darinya segera.

Lihat Eksperimen Pena #6 oleh Daniel Del Core

Gumpalan partikel palsu oleh Eli Fitch

Tidak seperti contoh sebelumnya, yang memiliki kepribadian berani dan karisma bintang pop dari era 80-an yang terobsesi dengan spandex, yang satu ini terasa seperti sesuatu dari masa depan techno yang sederhana. Gumpalan dibangun dari partikel kecil yang menjadi lebih terang di bawah beberapa sudut untuk mencapai tampilan 3D.

Bisa ditebak, artis menggunakan sihir Three.js dan beberapa karya cerdik dengan tekstur prosedural untuk melakukan konsep ini.

Lihat Blob partikel palsu Pena #3Desember oleh Eli Fitch

CSS Blob Generator oleh Edwin Chen

Kami akan mengakhiri koleksi kami dengan CSS Blob Generator oleh Edwin Chen. Seperti judulnya, pena ini memiliki taman bermain kecil tempat Anda dapat membuat bentuk gumpalan.

Di sini Anda akan menemukan panel kecil tempat Anda dapat menetapkan radius ke setiap perbatasan. Meskipun statis dan datar, Anda dapat dengan mudah menyalin hasilnya dan menggerakkannya dengan bantuan JavaScript.

Lihat Pen CSS Blob Generator oleh Edwin Chen

Bentuk Sempurna untuk Suasana yang Menenangkan

Tidak mengherankan bahwa sifat halus dan tenang dari perilaku cair semakin populer akhir-akhir ini. Seperti aliran kecil yang mengalir melalui hutan, ia memikat Anda dan berfungsi sebagai pulau ketenangan di dunia online yang selalu berubah.

Animasi berbasis gumpalan hanya ditakdirkan untuk menguntungkan proyek-proyek modern. Mereka tidak mencolok, meskipun mereka pasti menarik perhatian. Baik Anda menginginkan realisasi yang elegan, datar, atau 3D yang mewah, itu akan dengan mudah membentuk suasana yang tenang.

Ini akan memperkaya pengalaman, menghiasi latar belakang dan, pada saat yang sama, memberi jalan pada konten. Latar belakang ini akan membantu Anda menjaga keseimbangan antara data visual dan tekstual.