Efek kebisingan sangat serbaguna. Mereka dapat membantu membentuk tampilan yang retro atau futuristik. Dan mereka juga menawarkan cara mudah untuk menambahkan kepribadian ke elemen desain apa pun. Item seperti teks, gambar, dan latar belakang semua dapat ditingkatkan dengan efek kasar dan terkadang glitchy ini.
Jadi, tidak mengherankan jika desainer web menghasilkan beberapa karya kreatif liar yang menggunakan efek noise. Semuanya, mulai dari fitur statis hingga animasi interaktif dibagikan secara online. Beberapa hasilnya benar-benar menakjubkan.
Untuk membuktikan pendapat kami, kami telah menjelajahi CodePen untuk contoh teratas dari efek kebisingan dalam tindakan. Mau lihat sendiri? Mari kita membawa kebisingan!
Animasi Tiga Gelombang oleh Chris Gannon
Animasi gelombang groovy ini mengingatkan pada peralatan elektronik kuno. Petunjuk kebisingan memberikan beberapa realisme pada pemandangan, sementara SVG menghasilkan gerakan yang sangat halus. Ini bisa membuat animasi pemuatan yang bagus.
Lihat Pena Gelombang tiga oleh Chris Gannon
Uji Filter Turbulensi SVG oleh Simon Coudeville
Inilah efek retro yang menambahkan kebisingan Perlin ke wadah teks. Pemfilteran SVG yang dapat disesuaikan memungkinkan Anda untuk mengubah distorsi dengan berbagai cara. Tepi yang bergerigi dan alias berasal dari waktu sebelum kartu video kelas atas membuat grafik terlihat halus seperti sutra.
Lihat Pena Uji Filter Turbulensi SVG oleh Simon Coudeville
Hantu Bising (WebGL Shader) oleh Ksenia Kondrashova
Kebisingan bisa seram, terbukti dengan hantu ini yang mengikuti jalur kursor Anda. Perhatikan bagian luar karakter yang kasar, di mana ia tampak memudar ke udara tipis. Animasinya otentik – belum lagi sangat menyenangkan.
Lihat Pena Hantu berisik (shader WebGL) oleh Ksenia Kondrashova
Kesalahan CSS Murni oleh Tee
Tergantung pada sudut pandang Anda, adegan glitchy ini bisa dianggap modern atau retro. Tapi yang tidak diperdebatkan adalah gerakan tajam dan perubahan warna. Cuplikan ini mungkin memaksa Anda untuk memeriksa pengaturan monitor Anda – untuk berjaga-jaga jika ada yang tidak beres.
Lihat Pena Eksperimen Glitch CSS Murni (Twitch Intro WIP) oleh Tee
Efek Cat Air Dinamis oleh Shaw
Dengan mencampur warna cat air dan poligon, presentasi ini menampilkan tampilan usang. Klik atau sentuh kanvas untuk menambahkan percikan warna yang bising. Semuanya adalah proyek seni interaktif yang menyenangkan.
Lihat Pena Cat Air Dinamis ️
Seni Kebisingan oleh Tibix
Gumpalan pergeseran warna-warni cuplikan ini mirip dengan peta panas. Gunakan panel kontrol untuk menyesuaikan ukuran, kecepatan, bentuk, dan rona animasi. Sekali lagi, efek kebisingan menambahkan beberapa sifat realistis ke dalam campuran.
Lihat Pena Seni Kebisingan #8 oleh Tibix
Partikel WebGL & Perpindahan Kebisingan oleh Nicolas Garnier
Untuk efek noise yang lebih modern, lihat animasi partikel ini. Ini menggunakan WebGL untuk membuat gelombang 3D seperti cairan, dengan bayangan cahaya yang luar biasa untuk boot. Kebisingan berdampak saat pencahayaan beralih dari gelap ke putih terang. Ini memesona dan contoh dari apa yang mampu dilakukan oleh perpustakaan JavaScript yang kuat ini.
Lihat Pena Partikel WebGL + perpindahan kebisingan oleh Nicolas Garnier
Efek Gradien Risograph dengan SVG oleh Christopher Kirk-Nielsen
Tidak ada animasi mewah di sini. Sama saja, bentuk ini menunjukkan bahwa efek noise juga dapat meningkatkan elemen statis. Butiran yang sangat detail pasti akan membantu Anda menciptakan estetika sekaligus menarik perhatian pengguna.
Lihat Pena Efek Gradien Risograph dengan SVG oleh Christopher Kirk-Nielsen
Membuat Kebisingan untuk Kesenangan Anda
Baik digunakan sebagai latar belakang yang halus atau bintang pertunjukan, efek kebisingan adalah tambahan yang bagus untuk kotak peralatan desainer. Mereka bisa menjadi hal yang tepat untuk menambahkan beberapa bakat pada proyek Anda.
Kembali pada hari itu, kebisingan semata-mata merupakan peningkatan editor gambar. Namun berkat CSS dan JavaScript, dimungkinkan untuk menerapkan efek ini tanpa merusak kinerja atau aksesibilitas. Seperti yang ditunjukkan cuplikan di atas, ada potensi dunia di sini.
Kami harap Anda menikmati mengintip apa yang dapat dilakukan oleh efek kebisingan. Jika Anda ingin melihat lebih banyak contoh, lihat kami Koleksi CodePen.
