Dalam desain web, animasi sering digunakan sebagai cara untuk menarik perhatian. Gerakan memaksa pengguna untuk fokus pada elemen tertentu – seperti tombol atau gambar.
Tetapi animasi juga dapat digunakan dengan cara yang lebih halus. Latar belakang animasi, misalnya, sering mengabaikan lonceng dan peluit yang terlihat dalam konten situs. Sebaliknya, mereka digunakan untuk menciptakan suasana hati dan meningkatkan estetika.
Itu tidak berarti latar belakang animasi tidak boleh keras atau bahkan menjengkelkan. Itu semua tergantung pada tujuan di balik elemen tersebut. Jika ada, ini menunjukkan fleksibilitas yang diberikan kepada desainer.
Hari ini, kita akan menjelajahi latar belakang animasi yang menjalankan keseluruhan dalam hal tampilan dan kasus penggunaan. Mereka adalah contoh utama bagaimana sedikit CSS dan JavaScript dapat menambahkan bakat ke fitur yang sebelumnya statis.
Latar Belakang Bokeh Animasi oleh smpnjn
Gaya bokeh sering dikaitkan dengan fotografi. Ini digunakan untuk efek yang luar biasa saat titik masuk dan keluar dari fokus – mirip dengan lampu lava. Cuplikan ini menggunakan vanilla JavaScript dan HTML canvas untuk membuat latar belakang sehalus sutra.
Lihat Pena Kanvas Lampu Lava Animasi Bokeh oleh smpnj (@smpnjn)
Latar Belakang UI Buram oleh George Francis
Latar belakang ini memiliki efek yang serupa, hanya sedikit lebih halus. Ini juga sangat cocok untuk UI “buram” di latar depan, karena Anda dapat melihat bola melayang dengan lembut di bawah wadah seperti kaca. Animasi juga bersifat generatif – artinya bergerak secara acak berdasarkan kriteria yang ditetapkan.
Lihat Pena UI Generatif – Animasi Orb [pixi.js] + Elemen Dingin ️ oleh George Francis
Latar Belakang Gelombang CSS Sederhana oleh Goodkatz
Berikut adalah cara fokus yang sempit dalam menggunakan latar belakang animasi. Gelombang lembut bertenaga CSS ini menyediakan sarana untuk memisahkan area pahlawan dari konten halaman lainnya. Itu akan menjadi bagian intro yang bagus yang menghindari pengguna yang berlebihan.
Lihat Pena Gelombang CSS Sederhana | Seluler &Lebar penuh oleh Goodkatz
Latar Belakang Gradien Animasi CSS oleh Andrew
Gradien membuat latar belakang animasi yang bagus. Mereka terlihat tanpa menghilangkan elemen halaman yang lebih penting. Di sini kita memiliki gradien radial yang secara halus menggeser warna.
Lihat Pena Latar belakang animasi CSS oleh Andrew
Teks Animasi Seamless CSS oleh George Brook
Menggunakan CSS background-clip dapat menambahkan beberapa dampak serius pada elemen desain. Cuplikan ini menambahkan latar belakang pengguliran mulus ke teks header yang langsung menciptakan suasana meriah.
Lihat Pena Teks Animasi Seamless CSS oleh George Brook
Latar Belakang Animasi CSS Murni oleh Mohammad Abdul Mohaiman
Kecepatan dapat memainkan peran penting dalam keramahan pengguna dari latar belakang animasi. Kotak yang bergulir perlahan ini mungkin berputar dan berputar, tetapi memungkinkan Anda untuk membaca judul dengan mudah. Jika Anda akan menambahkan teks di atas animasi, gerakan yang lebih lambat lebih baik.
Lihat Pena Latar Belakang Animasi Css Murni oleh Mohammad Abdul Mohaiman
Latar Belakang Konsep XI oleh Dhruve Shah
Pola segi enam yang menyenangkan ini menambahkan tampilan teknologi tinggi. Didukung oleh jQuery, bentuk garis datang dan pergi – mengingatkan pada sel yang berkembang biak di bawah mikroskop. Ini bisa sangat cocok untuk area pahlawan atau bahkan footer situs.
Lihat Pena Latar Belakang Konsep XI oleh Dhruve Shah
Latar Belakang Animasi SVG oleh Josie Barker
Terakhir, cuplikan ini dengan cerdas memanfaatkan kombinasi efek yang telah kita lihat di atas. Ada pergeseran warna gradien bersama dengan bentuk morphing lembut juga. SVG dan CSS memastikan semuanya berjalan lancar. Yang penting, ini berfungsi sama indahnya pada viewport kecil seperti halnya pada desktop.
Lihat Pena Latar belakang animasi SVG oleh Josie Barker
Jadikan Latar Belakang Anda Menonjol
Latar belakang animasi memberikan cara mudah untuk menghadirkan gaya unik ke situs web Anda. Baik Anda menggunakannya untuk seluruh halaman atau hanya satu elemen, mereka dapat membantu menciptakan visual dan pengalaman pengguna yang menarik.
Namun, ada baiknya meluangkan waktu untuk mempertimbangkan dengan cermat dampaknya sebelum implementasi. Idealnya, animasi harus menambah – bukan mengalihkan – tujuan situs web Anda. Faktor-faktor seperti aksesibilitas dan kegunaan adalah yang terpenting. Dengan mengingat hal itu, pikirkan tentang apa yang terbaik untuk kebutuhan Anda.
Mencari lebih banyak lagi contoh latar belakang animasi? Lihat kami Koleksi CodePen!
