8 Cuplikan yang Menunjukkan Efek Menolak dalam Desain Web

Eksperimen dengan kanvas adalah pembicaraan di kota hari ini. Mereka dapat dilihat tidak hanya sebagai konsep di taman bermain pengembang web populer tetapi juga sebagai solusi untuk proyek kehidupan nyata. Variasinya tidak diragukan lagi mencengangkan: Dari animasi partikel primitif berdasarkan plugin populer hingga ide unik yang merupakan perpaduan dari alat modern dan yang telah terbukti waktu.

Hari ini, kami menarik perhatian Anda pada efek tolak-menolak. Meski memiliki perilaku yang menjijikkan, namun tentunya memiliki sifat yang menarik. Mendorong pengguna untuk bermain dengan detail pemandangan dengan mendorong mereka ke berbagai arah, atau dalam beberapa kasus, bahkan menerbangkan semuanya, itu langsung menjadi hiburan utama. Itu membuat pengalaman pengguna menyenangkan dan mengasyikkan.

Mari jelajahi kumpulan demo yang menginspirasi dengan cuplikan kode sehingga Anda dapat melihat sendiri tren uniknya.

Menolak Garis

Sepintas, demo ini mengingatkan pada sekumpulan senar gitar. Gerakkan kursor Anda di atasnya, dan Anda akan melihat keajaibannya. Garis-garis mulai menekuk dan berubah bentuk, membentuk bola kecil.

Panel opsi di sebelah kanan memungkinkan Anda untuk mengontrol efeknya. Anda dapat mengatur radius jangkauan mouse, menambah atau mengurangi jumlah garis, atau mengubah jarak antar string. Perhatikan fisika. Ini dipikirkan dengan baik dan direproduksi dengan hati-hati.

Lihat Garis Penolak Pena oleh Daniel Velasquez

30.000 Partikel

Efek tolak-menolak terlihat sangat mengagumkan ketika diterapkan pada ribuan titik, bukan garis. Justin Windle membuktikan ini dalam praktik. Proyeknya yang ikonik dan sangat populer di CodePen menampilkan panel tempat 30.000 partikel kecil duduk dengan nyaman.

Mereka dikemas bersama untuk menciptakan permukaan yang padat. Arahkan kursor mouse ke atasnya, dan Anda akan melihat bagaimana titik-titik menjauh dari Anda. Meskipun mereka tidak menghilang dari pandangan, mereka ditahan oleh jangkauan mouse. Oleh karena itu, Anda dapat melihat lingkaran berongga yang relatif besar di mana titik-titik membentuk batas.

Lihat Pena 30.000 Partikel oleh Justin Windle

Partikel Interaktif

Jika bingkai persegi panjang sederhana tidak menginspirasi kreativitas Anda, Anda selalu dapat mengumpulkan semua titik itu menjadi karakter seperti yang dilakukan Tamino Martinius dalam proyek Partikel Interaktifnya.

Demo-nya mencakup satu kata, di mana setiap huruf dibangun dari ratusan titik. Tiup mereka dengan kursor mouse Anda untuk membumbui segalanya. Ada pusat kendali kecil tempat Anda dapat mengubah parameter eksperimen dan menyesuaikannya dengan preferensi Anda.

Lihat Logo Partikel Interaktif Pena oleh Tamino Martinius

Teks ke Partikel

Mari bermain dengan warna dan ukuran untuk memperkaya dua konsep sebelumnya dengan beberapa perubahan yang hidup seperti yang dilakukan Louis Hoebregts dalam proyek Text to Particles-nya.

Berbeda dengan solusi oleh Tamino Martinius, di sini titik-titik memiliki radius yang berbeda serta warna yang berbeda. Selain itu, Anda dipersilakan untuk mengubah teks dengan mengaturnya menggunakan input. Kursor mouse memiliki perilaku halus dan lembut yang membubarkan kerumunan dan menyebabkan gangguan kecil di taman bermain. Ini adalah demo yang benar-benar memanjakan mata.

Lihat Teks Pena ke partikel oleh Louis Hoebregts

Bola dan Gravitasi

Efek penolak dapat dengan mudah dikombinasikan dengan solusi berbasis fisika lainnya untuk menghasilkan hasil yang luar biasa. Pertimbangkan Bola dan Gravitasi.

Nama proyek mengatakan itu semua. Gravitasi, serta efek tolakan, terletak di jantung konsep – membuat pengalaman menarik.

Berbeda dengan contoh sebelumnya, di sini Anda perlu mengambil lingkaran dan menggunakannya sebagai alat untuk mendorong lingkaran lain menjauh. Anda hampir bisa memukul bola datar berwarna-warni ini, memaksanya untuk bergerak. Selain itu, Anda harus melawan gravitasi, yang membuat pengalaman menjadi lebih seru.

Lihat Pena BOLA & GRAVITASI oleh Marco Dell'Anna

Penarik perhatian

Proyek oleh Marco Dell'Anna ini juga dibangun di sekitar gravitasi. Anda dapat mengontrolnya dengan kursor mouse Anda. Gunakan untuk memindahkan partikel dan mengatur ulang posisinya.

Perhatikan, meskipun partikel akan mengubah posisinya, mereka akan tetap berusaha untuk kembali ke lingkaran. Jadi di sini, Anda dapat melihat kursor mouse yang berperan sebagai magnet, dan pada saat yang sama, alat untuk mendorong titik-titik itu (setidaknya, untuk sementara).

Lihat Pena Penarik – MatterJS oleh Marco Dell'Anna

Mengaktifkan

Activate adalah pena luar biasa yang dibuat oleh Gerard Ferrandez. Sama seperti pada contoh sebelumnya, penulis juga memilih gravitasi. Kali ini dikombinasikan dengan perilaku cairan dan tentu saja efek tolakan. Hasilnya, proyek ini memikat kami dengan tampilannya yang lucu dan sifatnya yang menyenangkan.

Lihat Pen diaktifkan oleh Gerard Ferrandez

Moar Plasma

Efek repelling dapat sangat membantu untuk animasi partikel juga. Anda bisa membuatnya lebih mendebarkan. Lihatlah Moar Plasma.

Di sini, Anda dapat melihat animasi kacau di mana kursor mouse menakut-nakuti semua partikel dengan mendorongnya ke sisi yang berbeda. Anda tidak hanya dapat menikmati demo, tetapi juga berinteraksi dengannya.

Lihat Plasma Pen Moar oleh John Chin-Jew

Partikel Bersalju

Snowy Particles adalah contoh bagus lainnya di mana animasi partikel tradisional mendapat dorongan. Nat, penulis pena, telah menggunakan dua trik.

Pertama, kursor mouse memiliki kekuatan untuk mengubah titik-titik sederhana menjadi kepingan salju, sehingga pemandangannya terasa benar-benar ajaib. Kedua, efek pengusir kecil ditambahkan yang sedikit menyebarkan massa bersalju sehingga Anda dapat melihat serpihan salju yang khas. Cukup fantastis.

Lihat partikel Pena.js salju oleh Nat

Repeller

Area lain di mana efek repelling membawa manfaat dan dengan mudah mengubah pemandangan membosankan menjadi ekstravaganza adalah efek teks. Kita telah melihat bagaimana kata-kata yang dibuat dari seribu titik terlihat luar biasa. Saatnya untuk mengubah titik menjadi garis dan membumbui semuanya dengan efek tolak-menolak. Mempertimbangkan Repeller sebagai titik dalam kasus.

Proyek ini menampilkan sebuah kata di mana simbol dibuat dari garis pendek dan tipis yang diarahkan pada pemirsa. Dengan cara ini, Anda hampir dapat merasakan sifat volumetriknya. Ambil kursor mouse Anda dan seret melintasi teks, dan Anda akan melihat bagaimana garis mulai menari.

Tingkah laku mereka halus dan enak dipandang, meskipun teksnya sendiri terasa agak tajam dan tajam. Selain itu, garis-garisnya juga bergerak sendiri, sehingga terasa seperti ada angin sepoi-sepoi yang menggoyangkan bagian-bagian komposisi. Hasilnya, Anda dapat menikmati mahakarya sejati di mana teks sederhana menjalankan pertunjukan.

Lihat Pen Repellers oleh Rein van der Woerd

Daya Tarik Melalui Tolakan

Meskipun efek tolak-menolak digunakan untuk mendorong detail komposisi menjauh, tetap saja itu benar-benar magnetis. Anda tidak bisa mengalihkan pandangan darinya. Itu langsung menarik perhatian dengan perilakunya yang menyenangkan dan mendorong pengguna untuk berinteraksi dengan pemandangan itu.

Efek tolak-menolak tidak sendirian dalam perjuangannya untuk memenangkan penonton. Ini berkolaborasi sempurna dengan jenis animasi dan efek lain yang menghadirkan solusi unik dan menarik perhatian.