Latar belakang animasi adalah fitur populer dari situs web modern. Itu bukan lagi tren atau sesuatu yang luar biasa. Ini hanyalah salah satu cara yang layak untuk menghias area pahlawan hari ini. Meskipun masih ada masalah dengan kompatibilitas browser, solusinya telah berhasil menemukan ceruk untuk dirinya sendiri.
Ada berbagai jenis animasi. Kamu dapat menemukan:
Sementara beberapa tahun yang lalu, animasi partikel yang diilhami oleh rasi bintang mendominasi kandang ayam, hari ini animasi tetesan menggairahkan pikiran tim kreatif. Apa yang bisa kamu lakukan Perilaku bersih tidak bisa ditolak. Rutin transformasi yang menunjukkan bagaimana setetes besar bergerak dengan lancar di ruang angkasa dengan mudah memenangkan pemirsa daring dan menempatkan situs Anda di posisi terdepan.
Untuk memanfaatkan teknik konvensional ini, kami menawarkan kumpulan cuplikan kode yang luar biasa yang akan memberi Anda petunjuk tentang cara membuat animasi gelembung Anda sendiri. Anda dapat melakukannya dengan alat baru atau tradisional. Sekarang, mari cari kombinasi yang sempurna untuk proyek Anda selanjutnya.
Animasi gumpalan Uwe Chardon
Versi Uwe Chardon dari solusi populer ini praktis dan menginspirasi. Ini memiliki drop sederhana dan datar, dengan warna oranye yang indah dan tepi yang halus, ditempatkan di lingkungan yang bersih. Dia berhasil meniru perilaku bersih dengan sangat baik.
Hasilnya adalah kombinasi pemenang bentuk sederhana dan perilaku kompleks yang terlihat cukup mengesankan.
Tonton animasi CSS murni dari Pena Uwe Chardon
Ashton Holgate Blob
Contoh di atas menunjukkan tipe drop tradisional dengan bentuk tidak beraturan dan transformasi yang relatif ekspresif. Namun, proyek Ashton Holgate ini berpegang pada bentuk yang lebih ilahi, yang hampir mengelilingi lingkaran, dan perubahannya hampir tak terlihat. Namun, itu juga terlihat luar biasa.
Selanjutnya, artis juga bermain-main dengan teks, memaksanya untuk berubah warna ke arah yang berlawanan ketika menyentuh area gelembung.
Lihat Pena Ballpoint Ashton Holgate
Bouncing liquid loader oleh Fabio Ottaviani
Fabio Ottaviani mempraktikkan sifat main-main dari perilaku menawan, yang melekat dalam animasi gumpalan. Gelembungnya kecil, tetapi memiliki dampak yang hebat dengan transformasi yang menarik dan menyenangkan.
Meskipun papan nama pena bertuliskan “Charger,” ia dapat dengan mudah diubah menjadi detail latar belakang dekoratif. Dan untuk melakukan itu, yang perlu Anda ketahui hanyalah HTML dan CSS, karena artis tidak menggunakan sihir JavaScript apa pun. Cerdas.
Lihat Liquid loader dengan tombak yang dapat ditarik oleh Fabio Ottaviani
Canvas Stain Test oleh Shaw
Berbeda dengan contoh sebelumnya, penurunan ini murni dihasilkan oleh JavaScript. Jadi bersiap-siap untuk terjun ke solusi yang menarik dan gameplay yang rumit dengan grafis. Selain itu, konsep ini berbeda dari yang lain dalam aspek primitif, bersama dengan perilaku yang sangat lembut dan tenang yang menghasilkan suasana yang tenang secara keseluruhan.
Ini cukup universal dan netral. Dengan demikian bisa menjadi animasi latar belakang yang sempurna untuk berbagai proyek.
Lihat Uji Pena Kanvas Shaw
Gumpalan oleh Jeffrey
Solusi Jeffrey ini adalah kombinasi pemenang dari dua tren. Di sini, Anda dapat menemukan dasar bergelombang yang sangat populer saat ini dan perilaku bersih yang lebih diutamakan daripada opsi lain.
Cuplikan kode dibuat dengan HTML, CSS, dan JavaScript. Itu terlihat konsisten di beberapa browser dan perangkat. Artis menggunakan algoritma pegas dasar yang membuat interaksi dengan gelembung besar tampak nyata dan tidak tiruan.
Perhatikan bahwa meskipun gelembung menempati setengah adegan, itu tidak mendominasi pemirsa. Sikap yang halus dan tenteram ada di balik kebijaksanaan ini.
Lihatlah pena Jeffrey
Charlotte Dann Blobs
Jika satu tetes saja tidak cukup untuk menghasilkan kesan yang tepat, Anda selalu dapat memilih selusin. Charlotte Dann, dengan potongan kode yang bagus, akan menunjukkan kepada Anda bagaimana melakukannya tanpa merusak efek keseluruhan dan mengesankan pengunjung.
Cuplikan kodenya sangat menyenangkan untuk ditonton. Ini memiliki banyak gelembung bergerak kecil yang berinteraksi satu sama lain. Masing-masing tampak seperti titik cahaya kecil. Bersama-sama, mereka membentuk setetes besar yang memancarkan panas di semua bidang.
Lihat gumpalan bulu Charlotte Dann
Sekarang, mari kita beralih dari dunia datar ke dunia tiga dimensi.
Gumpalan oleh Georgi Nikoloff
Gout Georgi Nikoloff adalah contohnya. Segera menangkap mata dengan warna cerah, penampilan teknologi tinggi, dan perilaku dinamis. Pengembang memanfaatkan sepenuhnya teknologi canggih, menggunakan WebGL, GLSL, dan shader untuk keuntungan mereka. Meskipun solusinya tergantung pada kompatibilitas browser, tampaknya menginspirasi.
Lihat penurunan bulu Georgi Nikoloff
Uji 6 oleh Daniel Del Core
Daniel Del Core menunjukkan kepada audiens online cara bermain dengan Simplex noise dan memperbaikinya dengan beberapa tekstur yang direproduksi dengan hati-hati. Hasilnya adalah bola paintball yang terinspirasi dari permen. Meskipun dia bergerak sangat cepat, dia sangat menarik sehingga sulit untuk mengalihkan pandangannya dengan segera.
Lihat Eksperimen Bulu # 6 oleh Daniel Del Core
Eli Fitch Drop Partikel Palsu
Tidak seperti contoh di atas, yang memiliki kepribadian yang berani dan karisma bintang pop tahun 80-an yang terobsesi spandex, ini terdengar seperti beberapa techno masa depan yang sederhana. Gumpalan dibangun dari partikel-partikel kecil yang lebih cerah di beberapa sudut untuk tampilan 3D.
Tidak mengherankan, artis menggunakan keajaiban Three.js dan pekerjaan tekstur prosedural yang cerdas untuk mewujudkan konsep ini.
Lihat Pena Partikel Palsu Eli Fitch # 3 bulan Desember
CSS Blob Generator oleh Edwin Chen
Mari kita selesaikan koleksi kita dengan generator gumpalan CSS Edwin Chen. Seperti judulnya, pulpen ini memiliki taman bermain kecil di mana dimungkinkan untuk membuat bentuk jatuh.
Di sini Anda akan menemukan panel kecil di mana Anda dapat menetapkan radius ke setiap tepi. Meskipun statis dan datar, Anda dapat dengan mudah menyalin hasilnya dan memindahkannya dengan bantuan JavaScript.
Lihat generator gumpalan Pena CSS Edwin Chen
Bentuk yang sempurna untuk lingkungan yang santai.
Tidak mengherankan, sifat tenang dan lembut dari perilaku cair menjadi populer saat ini. Seperti aliran kecil yang memukau melintasi hutan, itu menarik Anda masuk dan berfungsi sebagai pulau ketenangan di dunia online yang terus berubah.
Animasi berbasis gumpalan dirancang untuk menguntungkan proyek-proyek modern. Mereka bijaksana, meskipun mereka tentu saja menarik perhatian. Jika Anda memilih kreasi 3D yang elegan, datar, atau mewah, Anda akan dengan mudah membangun suasana yang tenang.
Ini akan memperkaya pengalaman, mempercantik latar belakang, dan pada saat yang sama memberi jalan kepada konten. Latar belakang ini akan membantu menjaga keseimbangan antara data visual dan tekstual.
