Bepergian adalah salah satu tugas paling mendasar yang kami minta agar dilakukan pengguna. Dilihat dari jumlah halaman dan aplikasi yang digunakan hari ini, kami banyak bertanya.
Menambahkan efek berbasis gulir dapat menjadi cara yang bagus untuk meningkatkan pengalaman pengguna Anda. Ini berarti bahwa selama mereka tidak mengganggu kemampuan untuk menelusuri bagian konten yang panjang. Efeknya harus menyederhanakan dan menambahkan sentuhan elegan ke dalam campuran.
Berikut adalah kumpulan efek dan alat gulir yang akan menyenangkan pengunjung dan (semoga) membuat Anda keluar dari jalan.
Bagian demi bagian
Situs web modern umumnya dibagi menjadi beberapa bagian konten, masing-masing dengan elemen terpisah. Bagian praktis ini menambahkan tombol (tersedia dalam gaya yang berbeda) di bagian bawah layar yang memungkinkan pengguna untuk mengklik dan menggulir ke bagian selanjutnya. Gunakan ID CSS bersama dengan jQuery untuk membuat navigasi berfungsi.
Lihat pena demo: Tombol gulir CSS Naoy
Semua tanda mengatakan Anda bergerak
Pengukur gulir telah menjadi sangat populer di situs yang kaya konten. Melalui metode yang mudah diasimilasikan, ini menginformasikan tentang jarak pengguna dari cerita. Keuntungan bahwa solusi ini hanya CSS.
Lihat pena indikator gulir CSS hanya oleh Mike (@MadeByMike)
Anda dapat menggulir jika mau
Sepotong kode ini belum tentu berpengaruh pada dirinya sendiri. Tetapi ia memiliki tujuan. Desainer sering menggunakan gambar latar belakang layar penuh dan elemen-elemen lain yang dapat membuat scrolling ambigu bagi pengguna. Berkat ini, elemen kecil, seperti ikon gulir animasi, memberi tahu pengguna bahwa ya, akan ada lebih banyak konten. Ini tidak cocok untuk semua situasi, tetapi ada kalanya masuk akal.
Lihatlah pena animasi Micro CSS dari situs gulir Ryan Mulligan
Pengurangan judul yang luar biasa
Judul perekat diri ini telah menjadi fondasi seiring waktu. Mengapa mereka dapat menambah banyak kenyamanan bagi pengguna. Mampu pindah ke area lain dari situs tanpa harus menggulir ke bagian atas halaman hanya membuat hidup lebih mudah. Seperti biasa, contoh ini menyusut ke elemen yang lebih kompak saat halaman bergulir.
Lihat Blake Bowen header gulir
Geser kanan
Ini adalah versi lain dari tajuk stiker. Kali ini, ini dikonfigurasi untuk situs web satu halaman. Navigasi teratas secara otomatis menyoroti bagian konten saat ini dan memungkinkan pengguna untuk dengan cepat beralih di antara mereka.
Lihat Pena Navigasi Slider Ettrics Adhesive (Responsif)
Warna terbang
Mari kita lihat bagian lain yang ideal untuk situs satu halaman atau halaman panjang dengan banyak bagian konten. Gunakan CSS dan beberapa jQuery untuk mengubah warna latar belakang dengan menggulir ke bawah (dan ya itu bekerja sebaliknya). Anda juga dapat mengirim kueri ke skrip yang melakukan hal yang sama, tetapi dengan gradien.
Lihat pena Ubah warna latar belakang saat menggulir versi 2 penulis: JP Nothard
Konversi vertikal menjadi horizontal
Pernah ingin halaman Anda bergulir secara horizontal, bukan vertikal? Tentu saja, Anda dapat melakukan ini tanpa skenario mewah. Tetapi bagaimana jika Anda tidak menginginkan bilah gulir horizontal? Dalam hal ini, Anda memerlukan sesuatu seperti contoh ini. Gunakan skrip bernama jInvertScroll yang mengubah halaman Anda menjadi scrolling samping, bersama dengan efek paralaks.
Tampilkan Pena Gulir Sisi dengan SitePoint jInvertScroll
Aktifkan saat menggulir
Salah satu tren paling penting saat ini adalah animasi konten yang muncul di jendela grafik. Saat melakukannya dengan selera yang baik, perhatikan setiap bagian. Tapi bertindak terlalu jauh dan lebih seperti aksi sirkus online. Jika Anda memutuskan untuk melewati, pertimbangkan kode ini. Ini mendukung perpustakaan AOS (gulir animasi).
Lihat pensil AOS – Animasi Snik
Gulir, pengguna jaringan
Di masa lalu, idenya adalah untuk menghindari perpindahan di semua biaya. Sekarang, media sosial dan telepon pintar memungkinkan kita untuk menutupi bagian yang panjang dengan ibu jari kita (dan kursor). Kita juga bisa menjadikannya menyenangkan dan bermanfaat.
Inilah yang ingin dilakukan fragmen sebelumnya. Mereka mencakup banyak kasus penggunaan dan, dalam kebanyakan kasus, menghindari ketidaknyamanan. Ini menciptakan pengalaman pengguna yang solid.
Apakah Anda mencari lebih banyak ide? Lihat koleksi CodePen kami untuk cuplikan gulir yang lebih banyak!
