10 CSS & JavaScript Snippet Kustom untuk Efek Arahkan & Klik

Pengembang dapat membuat beberapa efek gila dengan tindakan pengguna sederhana seperti melayang dan mengklik mouse. Ini sebagian besar berhubungan dengan pengguna desktop tetapi web seluler juga mendukung efek klik/sentuh di sebagian besar browser.

Jika Anda sedang mencari beberapa ide keren untuk ditiru dalam proyek Anda sendiri, maka koleksi ini pasti memiliki sesuatu untuk Anda. Siapa pun yang mengetahui sedikit JavaScript dan CSS dapat dengan mudah mengubah efek ini agar berfungsi di browser apa pun, untuk situs web apa pun, dan menyempurnakan pengalaman tata letak.

Efek Arahkan Tombol

Titik awal yang jelas untuk efek animasi adalah tombol CSS. Ini adalah yang paling praktis dalam penggunaan sehari-hari karena mereka menangani banyak interaktivitas. Tombol CTA praktis meminta perhatian dan dengan efek melayang ini Anda dapat menarik perhatian lebih cepat.

Setiap efek menggunakan CSS murni untuk animasi. Beberapa tombol ini mengandalkan JavaScript untuk acara mouseover, tetapi semua animasi masih dikontrol langsung di CSS.

Jika Anda mendesain tata letak datar, animasi ini akan sangat mudah digunakan.

Nav Melayang

Untuk pena ini, Anda akan menemukan beberapa acara navigasi hover. Ini bergantung pada CSS murni yang sekali lagi mengontrol setiap hyperlink dengan efek hover yang berbeda.

Menu navigasi biasanya sangat sederhana dan umum. Itu sebabnya acara hover benar-benar dapat membumbui desain dan menunjukkan kepada pengunjung bahwa Anda peduli dengan detail kecil.

Sebagian besar animasi ini cukup jinak untuk masuk ke situs web mana pun, jadi sangat bagus untuk menyalin/menempel dengan mudah ke tata letak apa pun.

Efek Arahkan Foto

Seberapa sering Anda menemukan galeri foto dengan subtitle yang membosankan dan tanpa konteks yang nyata? Saya melihat ini terlalu sering, dan mereka hanya merasa malas.

Saya sangat menyukai efek foto ini yang semuanya mengandalkan galeri thumbnail sederhana. Saat Anda mengarahkan gambar, Anda akan melihat judul foto, deskripsi, dan tombol "baca selengkapnya".

Setiap elemen meluncur ke tampilan dari sudut yang berbeda dan membantu galeri gambar ini muncul langsung dari halaman.

CSS Tooltip Melayang

Setiap browser mendukung tooltips default tetapi Anda selalu dapat membuatnya sendiri menggunakan plugin atau dengan mengkloning pena seperti ini. Ini dikembangkan oleh Ty Strong dan menunjukkan seberapa jauh Anda dapat mengambil tooltips CSS murni.

Seluruh cuplikan ini bekerja dengan menargetkan tag HTML <dfn>. Saat mengarahkan teks apa pun yang dibungkus dengan tag ini, itu akan secara otomatis memudar ke tampilan saat mengarahkan kursor muncul seperti tooltip.

Segitiga CSS murni telah ada selama bertahun-tahun sehingga cukup mudah untuk membuat ulang gaya tooltip. Tapi saya paling terkesan dengan animasi halus yang semuanya dikontrol melalui CSS3.

Ikon CSS di Arahkan

Berikut adalah contoh lain dari sesuatu yang keren yang dapat Anda buat dengan CSS murni. Semua tombol sederhana ini memiliki ikon tersembunyi yang hanya muncul ketika kursor mendarat di atasnya.

Setiap ikon berasal dari Font Awesome sehingga Anda dapat mereplikasi desain ini dengan ikon yang benar-benar gratis.

Efeknya termasuk ikon slide-in, peregangan, dan memudar yang muncul saat melayang dan menghilang saat kursor bergerak ke tempat lain.

Paginasi Tak Terbatas

Pagination web selalu sangat membosankan, mungkin karena itu bukan bagian antarmuka yang mencolok. Tetapi dengan efek pagination oleh Mariusz Dabrowski ini, Anda dapat membawa pagination Anda ke level berikutnya.

Satu-satunya hal tentang animasi ini adalah ia dibuat untuk memuat dari satu halaman ke halaman lain. Jadi ini bekerja paling baik dengan halaman bertenaga Ajax di mana seluruh halaman tidak dimuat ulang. Dengan cara ini seluruh animasi terlihat saat konten baru dimuat.

Ini pasti memiliki nilai praktis yang terbatas tetapi efeknya luar biasa.

Animasi Nav Hamparan

Menu navigasi layar penuh sangat populer untuk situs web responsif seluler dan juga berfungsi untuk sebagian besar pengguna. Tapi ini tidak harus membosankan atau statis ketika Anda memiliki efek overlay seperti ini secara gratis di CodePen.

Pengembang Ryan Mulligan membuat animasi mengerikan ini dengan keyframe CSS murni yang berjalan pada satu kelas CSS.

Acara klik dipicu melalui jQuery, tetapi semua gerakannya adalah CSS. Jelas salah satu animasi keren yang pernah saya lihat dan ternyata sangat mulus untuk boot.

Efek Klik CSS Murni

Desain material Google menguraikan sejumlah efek animasi dan salah satunya adalah efek klik riak. Ini paling umum dengan perangkat Android, tetapi telah bocor ke web juga.

Dan dengan pena ini Anda dapat mereplikasi efek riak dalam pekerjaan Anda sendiri hanya dengan menggunakan kode CSS.

Cuplikan ini menargetkan ikon yang juga menyala saat dipilih, jadi lebih mirip tabbing/memilih elemen halaman. Tetapi efeknya dapat ditransfer ke apa pun yang membuatnya mudah untuk dikloning.

Tombol Mana

Inilah salah satu efek tombol paling unik yang pernah saya lihat menggunakan SVG untuk bentuk dan CSS untuk animasi.

Coder Dean Hidri membuat efek tombol mana ini dengan hanya 80 baris CSS dan beberapa lusin baris HTML (termasuk SVG). Saat mengarahkan kursor, tombol ini menganimasikan bentuk cair khusus di dalam tombol untuk membuat isian latar belakang, lalu menganimasikan setelahnya.

Jika Anda memiliki situs yang dapat menggunakan gaya tombol ini, itu pasti layak untuk dipermainkan.

Tombol Ikon FX

Anda dapat melakukan banyak hal dengan font ikon dan tombol animasi oleh David Darnes ini adalah contoh yang bagus.

Ikon bernyawa dengan cara yang berbeda saat diarahkan, masing-masing dengan efek khasnya sendiri. Anda mungkin tidak menggunakan semua ikon ini dalam satu situs web, tetapi gaya animasi khusus mudah untuk digandakan. Mereka hanya bekerja pada CSS3 dan mereka akan cocok dengan font ikon apa pun yang Anda pilih. Efek yang sangat menyenangkan untuk dikloning untuk hampir semua situs web!

Dan itu melengkapi daftar efek UX saya, tapi ini jelas bukan koleksi definitif.

Jika Anda menjelajahi web, Anda dapat menemukan banyak efek tombol/ikon melayang lainnya dan banyak yang memiliki kode sumber gratis. Tetapi jika Anda ingin mempelajari lebih lanjut tentang animasi web khusus, lihat daftar besar plugin dan sumber daya kami untuk pengembang.