Hari ini, kami ingin menyoroti efek penolakan – tren unik dalam desain web yang menjijikkan sekaligus menarik.
Dengan mendorong elemen ke berbagai arah atau meniupnya mendorong pengguna untuk berinteraction dengan halaman dan menjelajahi detailnya. Terlepas dari perilakunya yang tampaknya tidak menyenangkan, ini adalah fitur yang sangat menarik yang dapat membuat pengalaman pengguna lebih menarik.
Kami telah menyusun kumpulan demo yang menginspirasi lengkap dengan cuplikan kode untuk menampilkan tren ini. Contoh-contoh ini akan memungkinkan Anda untuk melihat secara langsung keindahan dan intrik dari efek penolakan.
Menolak Garis oleh Daniel Velazquez
Contoh efek tolakan pertama ini mengingatkan kita pada satu set senar gitar. Sekilas, garis tampak statis, tetapi segera setelah Anda memindahkan kursor ke atasnya, sesuatu yang ajaib terjadi. Garis mulai membengkok dan berubah bentuk, akhirnya membentuk bola kecil.
Panel opsi di sisi kanan layar memberi Anda kendali penuh atas efeknya. Anda dapat menyesuaikan radius rentang mouse, menambah atau mengurangi jumlah garis, atau mengubah jarak antar string—simulasi yang benar-benar mengesankan dan realistis.
Lihat Pena Menolak Garis oleh Daniel Velazquez
30.000 Partikel oleh Justin Windle
Contoh Justin Windle adalah contoh mengagumkan dari efek penolakan yang diterapkan pada ribuan titik. Partikel yang padat bereaction secara dinamis terhadap kursor mouse Anda, dengan panik berhamburan saat Anda mengarahkan kursor ke atasnya.
Terlepas dari gerakannya yang panik, jangkauan mouse menahan titik-titik tersebut pada tempatnya, menghasilkan lingkaran besar yang berlubang. Tampilan yang menakjubkan dan interaktif ini merupakan bukti popularitas efek penolakan dalam desain web modern.
Lihat Pena 30.000 Partikel oleh Justin Windle
Logo Partikel Interaktif oleh Tamino Martinius
Jika bingkai persegi panjang sederhana tidak cukup untuk menginspirasi kreativitas Anda, ikuti petunjuk dari proyek Partikel Interaktif Tamino Martinius. Dalam demo yang memukau ini, setiap huruf dari kata tersebut disusun dari ratusan titik yang dapat dihancurkan dengan kursor mouse Anda.
Proyek ini memiliki kontrol di mana Anda dapat mengubah parameter demo dan menyesuaikannya sesuai keinginan Anda. Pena ini adalah contoh utama bagaimana efek penolakan dapat digunakan dengan cara yang kreatif.
Lihat Pena Logo Partikel Interaktif oleh Tamino Martinius
Teks ke Partikel oleh Louis Hoebregts
Proyek Teks ke Partikel Louis Hoebregts adalah contoh yang sangat baik tentang bagaimana warna dan ukuran dapat menambah keaktifan pada efek penolakan. Tidak seperti solusi Tamino Martinius di atas, titik-titik dalam proyek ini memiliki jari-jari dan warna yang bervariasi, membuat tampilan visual yang mencolok.
Anda bahkan dapat mengubah teks dengan menyetelnya menggunakan input, memungkinkan Anda bereksperimen dengan frasa dan kata yang berbeda. Perilaku lembut kursor mouse membubarkan kerumunan, menyebabkan gangguan kecil namun memuaskan di taman bermain.
Lihat Pena Teks ke partikel oleh Louis Hoebregts
Bola & Gravitasi oleh Marco Dell’Anna
Efek tolakan dapat dikombinasikan dengan solusi berbasis fisika lainnya untuk menciptakan hasil yang luar biasa, seperti yang dicontohkan dalam proyek Balls and Gravity.
Gravitasi dan efek penolakan adalah konsep utama di balik demo yang memukau ini. Dalam demo, Anda harus mengambil lingkaran dan menggunakannya untuk mendorong lingkaran lain menjauh, hampir seperti permainan biliar. Setiap bola datar warna-warni bereaction terhadap gerakan Anda, menciptakan pengalaman yang menarik dan interaktif.
Lihat Pena BOLA & GRAVITASI oleh Marco Dell’Anna
Penarik dengan MatterJS oleh Marco Dell’Anna
Yang unik dari proyek ini adalah meskipun partikel bergerak menjauh dari posisi semula, mereka selalu berusaha untuk kembali ke lingkaran, menciptakan efek visual yang memukau. Kursor mouse memainkan peran ganda sebagai magnet, menarik partikel kembali ke lingkaran dan alat untuk mendorong titik menjauh, setidaknya untuk sementara.
Proyek ini adalah contoh utama bagaimana efek penolakan dapat digunakan bersama dengan konsep berbasis fisika lainnya, menghasilkan tampilan menakjubkan yang menangkap imajinasi.
Lihat Pena Penarik – MatterJS oleh Marco Dell’Anna
Proyek Repeller oleh Rein van der Woerd
Efek tolakan tidak hanya terbatas pada solusi berbasis partikel dan fisika. Itu juga dapat digunakan untuk membuat efek teks yang menakjubkan, seperti yang ditunjukkan dalam contoh ini, di mana sebuah kata dibuat dari garis pendek dan tipis yang diarahkan ke pemirsa, menciptakan kesan kedalaman dan volume.
Saat Anda mengambil kursor mouse dan menyeretnya melintasi teks, garis mulai menari dan bergerak sebagai respons terhadap gerakan Anda.
Perilaku garis halus dan menyenangkan secara visual, menciptakan efek menakjubkan yang meningkatkan sifat teks yang tajam dan tajam. Selain itu, garis bergerak dengan sendirinya, menciptakan sensasi angin sepoi-sepoi yang mengayunkan bagian demo.
Lihat Pena Repeller oleh Rein van der Woerd
Terlepas dari tujuannya untuk menghilangkan detail, efek penolakannya tidak dapat disangkal bersifat magnetis. Tingkah lakunya yang lucu segera menarik perhatian dan mendorong interaction dengan adegan tersebut.
Efek memukul mundur tidak sendirian dalam usahanya untuk menarik perhatian penonton. Jika digabungkan dengan jenis animasi dan efek lainnya, ini dapat menghasilkan solusi yang unik dan menarik perhatian.
Kemungkinannya tidak terbatas, dan desainer web dapat menggunakan efek penolakan sebagai alat yang ampuh untuk meningkatkan pengalaman pengguna dan membuat halaman web yang menawan.
