Menggulir adalah salah satu kebutuhan desain digital yang paling membosankan. Atau benarkah? Sangat mudah bagi desainer dan pengguna untuk mengabaikannya. Namun, kita menghabiskan sebagian besar hari-hari kita untuk bergerak ke atas, ke bawah, dan ke sekeliling. Ada sesuatu yang bisa dikatakan untuk bekerja ekstra.
Syukurlah, ada peluang untuk berbuat lebih banyak. Efek gulir dapat menambahkan elemen kesenangan ke dalam campuran. Mereka juga bagus untuk menambahkan konteks dan menarik perhatian ke konten penting. Beberapa efek bahkan menciptakan kesan mendalam.
Pengembang web telah menemukan segala macam kasus penggunaan kreatif. Kami menjelajahi arsip CodePen untuk menemukan delapan contoh utama tentang bagaimana CSS dan JavaScript meningkatkan pengalaman pengguna. Kami cukup terkesan dengan hasilnya.
Di bawah ini, Anda akan menemukan segalanya mulai dari elemen dasar hingga presentasi visual yang menakjubkan. Anda pasti akan menemukan inspirasi untuk proyek Anda berikutnya. Mari kita mulai!
Panel ScrollTrigger Premium
Dibuat oleh Ashish Ranjan
Berikut cara unik untuk menelusuri bagian halaman web. Pena ini menciptakan efek “susun”, di mana setiap bagian baru dilapiskan di atas bagian terakhir. Bagian sebelumnya diperbesar dan diperkecil, memungkinkan Anda membaca konten saat ini tanpa gangguan.
Mengesankannya, menggulir ke atas akan membalikkan efeknya. Teknik ini menggunakan pemicu gulir GSAP dan membuat halaman yang panjang tampak lebih pendek.
Lihat Pena Etalase PinStack – Panel ScrollTrigger Premium oleh Ashish Ranjan
Menggulir Teks & Memutar Galeri 3D
Dibuat oleh Luis Alberto Martinez Riancho
Galeri 3-D ini mengubah carousel klasik. Ini menggabungkan teks bergulir dengan kubus berputar yang disinkronkan dalam harmoni yang sempurna. Perhatikan bayangan dan tekstur yang digunakan untuk menciptakan nuansa fotorealistik.
Navigasi berbasis tombol memungkinkan Anda menghindari pengguliran sama sekali, jika itu yang Anda inginkan.
Lihat Pena Enam Wajah / Berjalan Sapi oleh Luis Alberto Martinez Riancho
Efek Gulir Bintang
Dibuat oleh Aleksa Rakocevic
Efek gulir tidak harus tebal. Ada kalanya kehalusan dibutuhkan dan dihargai oleh pengunjung. Latar belakang berbintang ini menampilkan motif paralaks dengan sedikit kilau.
Hasilnya adalah perjalanan yang menyenangkan, namun berkelas. Pertimbangkan untuk blog atau konten berdurasi panjang lainnya.
Lihat Pena Efek gulir bintang oleh Aleksa Rakocevic
Perilaku Gulir Halus
Dibuat oleh Margarita
Tetap dengan estetika halus, efek gulir pena ini adalah cara terbaik untuk mendandani sebuah artikel. Teks muncul dengan lembut saat Anda menuruni halaman.
HTML scroll-behavior digunakan untuk memastikan pengendaraan mulus dan menambahkan kesan pada konten statis. Yang ini cocok untuk hampir semua orang.
Lihat Pena Ini Bukan Kompetisi – Cerita Lengkap oleh Margarita
Spiral Lingkaran Tak Terbatas
Dibuat oleh Toc
Apakah Anda mencari galeri foto yang benar-benar aneh? Karya spiral ini tentu akan menyita perhatian. Gulir ke bawah, dan galeri berbentuk pita 3D ini berputar di setiap gambar.
Gunakan mouse atau jari Anda untuk mengubah perspektif. Efeknya sangat halus dan akan meningkatkan proyek portofolio Anda.
Lihat Pena Spiral lingkaran tak terbatas oleh Toc
Sorotan Kata Garis Waktu Gulir CSS
Dibuat oleh Daniel Haim
Berikut cara untuk mencantumkan layanan dan/atau pencapaian Anda dengan penuh gaya. Teks di sebelah kiri tetap ada saat Anda menggulir, sementara sisi kanan melompat ke kata atau frasa berikutnya.
Ini menggunakan scroll-snap-align Dan scroll-snap-type Properti CSS untuk menjaga presentasi tetap rapi. JavaScript menetapkan properti berdasarkan tindakan pengguna. Hasilnya adalah metode yang menarik untuk membuat dampak dengan tipografi.
Lihat Pena Sorotan Kata Garis Waktu Gulir CSS oleh Daniel Haim
Tepi Bagian yang Kenyal
Dibuat oleh Tom Miller
Menggulir dari satu bagian halaman ke halaman lainnya tidak harus membosankan. Efek kecil, seperti animasi “kenyal” ini, menambah konteks dan nilai hiburan pada prosesnya. Capai bagian bawah suatu bagian, dan Anda akan disambut dengan pantulan.
Ini idenya: mungkin tambahkan beberapa konfeti saat Anda mencapai akhir halaman. Bagaimanapun, pengunjung setia harus dirayakan!
Lihat Pena Tepi Bagian yang Kenyal oleh Tom Miller
Kolom Gulir Terbalik
Dibuat oleh Ryan Yu
Pengguliran multi-kolom galeri foto ini mengingatkan pada mesin slot. Kolomnya disinkronkan, tetapi bagian tengahnya bergerak ke arah sebaliknya. Ini menyenangkan dan mendalam tanpa membebani pengguna.
Sekali lagi, pemicu gulir GSAP berfungsi sebagai saus rahasia untuk mencapai efek tersebut.
Lihat Pena Membalikkan kolom gulir oleh Ryan Yu
Gunakan Efek Gulir Untuk Meningkatkan Pengalaman Pengguna
Menggulir tidak harus menjadi sebuah renungan dalam proyek desain Anda. Contoh di atas menunjukkan apa yang mungkin dilakukan dengan sedikit kode dan imajinasi.
Dalam beberapa kasus, efek ini bisa menjadi bintang pertunjukan. Pertimbangkan galeri foto dalam kumpulan kami. Mereka menjadi lebih menarik dan interaktif ketika Anda melampaui tata letak grid default. Anda mendapatkan bentuk dan fungsionalitas kelas atas.
Di sisi lain, kehalusan juga mendapat tempat saat menambahkan efek gulir ke halaman yang lebih tradisional. Sedikit keanggunan dapat mengubah konten statis menjadi sesuatu yang lebih berkesan.
Keputusan ada di tangan Anda. Pertimbangkan kebutuhan audiens dan aksesibilitas Anda, lalu pilih efek yang paling masuk akal.
Ingin melihat efek gulir yang lebih keren lagi? Lihat kami Koleksi CodePen!
Cuplikan Efek CSS Lainnya
Atas
