8 Cuplikan CSS & JavaScript untuk Membuat Efek Kursor yang Keren

8 Cuplikan CSS & JavaScript untuk Membuat Efek Kursor yang Keren

Kursor khusus adalah contoh yang bagus untuk peningkatan progresif dalam desain. Anda mulai dengan antarmuka pengguna (UI) sederhana untuk perangkat kecil berbasis sentuhan. Dari sana, perangkat yang lebih besar menawarkan kesempatan untuk memasukkan lebih banyak lonceng dan peluit.

Bagi pengguna dengan komputer desktop dan laptop, efek kursor dapat menambah unsur kesenangan. Mereka juga bisa terhubung dengan branding. Pikirkan situs web bertema Star Wars yang menggunakan Lightsaber ikonik sebagai kursornya. Kemungkinannya menarik, untuk sedikitnya.

Untungnya, membuat efek ini tidak memerlukan trik pikiran Jedi. Sebaliknya, hanya sedikit CSS dan JavaScript yang Anda butuhkan untuk memulai.

Kami menjelajahi dunia CodePen untuk mencari efek kursor yang keren. Berikut adalah delapan cuplikan kode yang menampilkan kreativitas desainer web.

Berbagai Status Kursor oleh Zack Hoherchak

Sebelum Anda membuat beberapa efek luar biasa, ada baiknya membiasakan diri dengan berbagai status kursor. Arahkan kursor ke contoh di sini dan lihat bagaimana CSS cursor karya properti. Ini saja dapat membantu meningkatkan kegunaan elemen yang dapat diklik.

Lihat Pena Kutukan Kursor oleh Zack Hoherchak

Jejak Kursor Neon oleh Kevin Levron

Mungkin jejak kursor berwarna cerah ini bukan untuk semua jenis situs web. Namun dalam pengaturan yang tepat (katakanlah, portofolio), efek ini dapat memberikan kesenangan berteknologi tinggi. Animasi yang apik dan transisi warna pasti akan menarik perhatian pengguna.

Lihat Pena Mainan ThreeJS – Kursor Neon oleh Kevin Levron

Layar Teks Kursor Spotlight oleh Caroline Artz

Efek kursor dapat melampaui panah kecil (atau titik, dalam hal ini) di layar Anda. Di sini ia menambahkan efek lampu sorot ke beberapa teks judul. Apa yang benar-benar menakjubkan adalah sedikit CSS dan JavaScript yang diperlukan untuk membuat presentasi.

Lihat Pena Layar Teks Kursor Spotlight oleh Caroline Artz

Kursor Tinta oleh Ricardo Mendieta

Efek ini menunjukkan potensi kursor untuk meningkatkan branding. Bayangkan kursor percikan tinta ini digunakan pada portofolio penulis atau bahkan percetakan. Itu juga terkendali dibandingkan dengan beberapa efek yang lebih aneh di luar sana. Ini membuatnya lebih cocok untuk bisnis.

Lihat Pena Kursor Tinta oleh Ricardo Mendieta

Lingkaran Kursor dengan Blend Mode oleh Clement Girault

Inilah implementasi CSS yang cerdas daripada meningkatkan kegunaan. Dengan menggunakan blend-mode properti, kursor berubah warna berdasarkan konten halaman. Ini dapat meningkatkan visibilitas elemen terhadap berbagai latar belakang.

Lihat Pena Lingkaran kursor dengan mode campuran oleh Clement Girault

Kursor Mouse Menunjuk ke CTA oleh Aaron Iker

Apakah kamu Betulkah ingin menarik perhatian pengguna ke area tertentu? Cuplikan ini menampilkan panah kursor yang berputar untuk terus mengarah ke tombol ajakan bertindak. Ini adalah trik kecil yang rapi yang bisa menjadi hal yang tepat untuk membumbui area pahlawan atau tautan penting lainnya.

Lihat Pena Kursor mouse menunjuk ke cta oleh Aaron Iker

Kursor Kustom Interaktif oleh hb

Bagaimana jika kursor dapat beradaptasi secara kontekstual berdasarkan jenis konten yang Anda arahkan? Itulah ide di balik cuplikan ini. Pointer adalah lingkaran secara default. Tapi arahkan kursor ke tautan, dan itu berubah menjadi garis persegi panjang. Itu juga “menempel” pada elemen navigasi di header halaman.

Lihat Pena Kursor Kustom Interaktif oleh hb

CursorGeist oleh Adam Kun

Perayaan liburan adalah alasan yang bagus untuk menggunakan efek kursor. Misalnya, Halloween menawarkan berbagai kemungkinan – seperti hantu seram ini. Ini meriah, namun warna tembus berarti tidak akan terlalu banyak mengalihkan perhatian dari konten halaman. Juga, perhatikan bagaimana reaksinya terhadap kecepatan gerakan kursor Anda.

Lihat Pena CursorGeist oleh Adam Kun

Efek Kursor Bisa Menjadi Alat Desain yang Kuat

Kursor khusus dapat memiliki dampak yang sama besarnya dengan trik apa pun di kotak peralatan desainer. Cuplikan di atas memiliki kekuatan untuk mengubah situs web dan menciptakan suasana tertentu.

Tapi seperti yang mereka katakan, dengan kekuatan besar datanglah tanggung jawab yang besar. Dan sangat mungkin untuk mengambil efek kursor terlalu jauh. Itu merugikan kegunaan – belum lagi aksesibilitas. Oleh karena itu, bijaksana untuk berhati-hati tentang di mana dan bagaimana kita menerapkannya. Tetap saja, efek yang tepat bisa sangat bermanfaat.

Mencari lebih banyak inspirasi? Lihat kami Koleksi CodePen untuk spektrum penuh efek kursor.

Post Comment