Ringkasan dasar tentang cara membangun pengalaman yang mirip dengan Instagram Stories di web.
Dalam postingan ini, saya ingin menyampaikan pemikiran tentang cara membangun komponen Stories untuk web yang responsif, mendukung navigasi keyboard, dan berfungsi di seluruh browser.
Jika Anda lebih memilih demonstrasi langsung untuk membuat komponen Stories ini sendiri, lihat codelab komponen Stories.
Jika Anda lebih suka video, berikut versi YouTube postingan ini:
Ringkasan
Dua contoh populer Stories UX adalah Snapchat Stories dan Instagram Stories (belum lagi armada). Dalam istilah UX umum, Stories biasanya merupakan pola khusus seluler yang berfokus pada ketuk untuk membuka beberapa langganan. Misalnya, di Instagram, pengguna membuka kisah teman dan melihat foto-foto yang ada di dalamnya. Mereka biasanya melakukan ini banyak teman sekaligus. Dengan mengetuk sisi kanan perangkat, pengguna akan langsung melanjutkan ke cerita berikutnya dari teman tersebut. Dengan menggeser ke kanan, pengguna dapat berpindah ke teman yang lain. Komponen Cerita cukup mirip dengan carousel, tetapi memungkinkan navigasi array multi-dimensi, bukan array satu dimensi. Seolah-olah ada {i>carousel<i} di dalam setiap {i>carousel<i}. 🤯
Memilih alat yang tepat untuk pekerjaan
Secara keseluruhan, saya menemukan komponen ini cukup mudah untuk dibuat, berkat beberapa fitur platform web yang penting. Mari kita bahas semuanya!
Petak CSS
Tata letak kita ternyata bukan urutan tinggi untuk CSS Grid karena dilengkapi dengan beberapa cara ampuh untuk menangani konten.
Tata letak teman
Wrapper komponen .stories
utama kami adalah scrollview horizontal yang mengutamakan seluler:
.stories {
inline-size: 100vw;
block-size: 100vh;
display: grid;
grid: 1fr / auto-flow 100%;
gap: 1ch;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior: contain;
touch-action: pan-x;
}
/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
max-inline-size: 480px;
max-block-size: 848px;
}
Mari kita uraikan tata letak grid
tersebut:
- Kami secara eksplisit mengisi area tampilan di perangkat seluler dengan
100vh
dan100vw
dan membatasi ukuran di desktop /
memisahkan template baris dan kolomauto-flow
diterjemahkan menjadigrid-auto-flow: column
- Template autoflow adalah
100%
, yang dalam hal ini berupa lebar jendela scroll
Pada ponsel, anggaplah ini seperti ukuran baris sebagai tinggi area pandang dan setiap kolom menjadi lebar area pandang. Melanjutkan dengan contoh Snapchat Stories dan Instagram Stories, setiap kolom akan menjadi cerita teman. Kita ingin cerita teman terus berlanjut di luar area pandang sehingga kita memiliki tempat untuk di-scroll. Petak akan membuat berapa pun kolom yang diperlukan untuk menata HTML Anda dalam setiap cerita teman, sehingga menciptakan container scroll yang dinamis dan responsif. Grid memungkinkan kita untuk memusatkan seluruh efek.
Promosi gabungan
Untuk setiap teman, kita memerlukan cerita mereka dalam status yang siap untuk penomoran halaman. Untuk menyiapkan animasi dan pola menyenangkan lainnya, saya memilih stack. Ketika saya mengatakan {i>stack<i}, maksud saya seperti Anda melihat sandwich ke bawah, tidak seperti Anda melihat dari samping.
Dengan petak CSS, kita dapat menentukan petak sel tunggal (yaitu persegi), dengan baris
dan kolom berbagi alias ([story]
), lalu setiap turunan ditugaskan ke
ruang sel tunggal beralias tersebut:
.user {
display: grid;
grid: [story] 1fr / [story] 1fr;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.story {
grid-area: story;
background-size: cover;
…
}
Dengan demikian, HTML kita dapat mengontrol urutan tumpukan dan menjaga semua elemen
tetap mengalir. Perhatikan bahwa kita tidak perlu melakukan apa pun dengan positioning absolute
atau z-index
, dan tidak perlu melakukan box yang benar dengan height: 100%
atau width: 100%
. Petak induk
sudah menentukan ukuran area tampilan gambar cerita, sehingga komponen cerita ini
tidak perlu diminta untuk mengisinya.
Titik Snap Scroll CSS
Spesifikasi Poin Snap Scroll CSS memudahkan Anda mengunci elemen ke area pandang saat men-scroll. Sebelum ada properti CSS ini, Anda harus menggunakan JavaScript, dan itu... sungguh sulit. Lihat Memperkenalkan Poin Snap Scroll CSS oleh Sarah Drasner untuk perincian lengkap cara menggunakannya.
.stories { display: grid; grid: 1fr / auto-flow 100%; gap: 1ch; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; touch-action: pan-x; }
.user { display: grid; grid: [story] 1fr / [story] 1fr; scroll-snap-align: start; scroll-snap-stop: always; }
Saya memilih Scroll Snap Points karena beberapa alasan:
- Aksesibilitas gratis. Status spesifikasi Titik Snap Scroll yang menyatakan bahwa menekan tombol Panah Kiri dan Panah Kanan akan berpindah melalui titik snap secara default.
- Spesifikasi yang terus bertambah. Spesifikasi Scroll Snap Points mendapatkan fitur dan peningkatan baru setiap saat, yang berarti bahwa komponen Stories saya mungkin akan menjadi lebih baik dari sini dan seterusnya.
- Kemudahan penerapan. Titik Snap Scroll secara praktis dibuat untuk kasus penggunaan penomoran halaman horizontal yang berpusat pada sentuhan.
- Inersia gaya platform gratis. Setiap platform akan di-scroll dan berhenti dalam gayanya, berbeda dengan inersia yang dinormalisasi yang dapat memiliki gaya scroll dan istirahat yang luar biasa.
Kompatibilitas lintas browser
Kami melakukan pengujian di Opera, Firefox, Safari, dan Chrome, plus Android dan iOS. Berikut adalah info singkat tentang fitur web yang menunjukkan perbedaan kemampuan dan dukungan.
Meskipun demikian, kami mendapati beberapa CSS tidak berlaku, sehingga beberapa platform saat ini melewatkan pengoptimalan UX. Saya tidak perlu mengelola fitur ini dan merasa yakin bahwa fitur ini pada akhirnya akan menjangkau browser dan platform lain.
scroll-snap-stop
Korsel adalah salah satu kasus penggunaan UX utama yang mendorong pembuatan
spesifikasi Poin Snap Scroll CSS. Tidak seperti Cerita, carousel tidak selalu perlu berhenti
pada setiap gambar setelah pengguna berinteraksi dengannya. Mungkin tidak masalah atau disarankan untuk
menggunakan korsel dengan cepat. Di sisi lain, story sebaiknya dibuka satu per satu,
dan itulah yang disediakan oleh scroll-snap-stop
.
.user {
scroll-snap-align: start;
scroll-snap-stop: always;
}
Pada saat postingan ini ditulis, scroll-snap-stop
hanya didukung di browser berbasis Chromium. Lihat
Kompatibilitas browser
untuk mengetahui update. Namun, ini bukan penghambat. Hanya saja, di {i>browser<i} yang tidak didukung,
pengguna dapat melewatkan teman secara tidak sengaja. Jadi pengguna hanya perlu lebih berhati-hati, atau
kita harus menulis JavaScript untuk memastikan bahwa teman yang dilewati tidak ditandai sebagai dilihat.
Baca selengkapnya di spesifikasi jika Anda tertarik.
overscroll-behavior
Pernahkah Anda men-scroll modal ketika tiba-tiba
mulai men-scroll konten di belakang modal?
overscroll-behavior
membiarkan developer menangkap yang men-scroll dan tidak pernah membiarkannya
pergi. Ini cocok untuk segala macam acara. Komponen Cerita Saya menggunakannya
untuk mencegah geseran dan gestur scroll tambahan keluar dari
komponen.
.stories {
overflow-x: auto;
overscroll-behavior: contain;
}
Safari dan Opera adalah 2 browser yang tidak mendukung ini, dan itu tidak masalah. Pengguna tersebut akan mendapatkan pengalaman overscroll seperti biasanya dan mungkin tidak pernah menyadari peningkatan ini. Saya pribadi penggemar berat dan suka menyertakannya sebagai bagian dari hampir setiap fitur {i>overscroll<i} yang saya terapkan. Ini adalah penambahan yang tidak berbahaya dan hanya mengarah pada peningkatan UX.
scrollIntoView({behavior: 'smooth'})
Ketika pengguna mengetuk atau mengklik dan telah mencapai akhir dari rangkaian cerita teman,
saatnya berpindah ke teman berikutnya dalam kumpulan titik snap scroll. Dengan
JavaScript, kita bisa mereferensikan teman berikutnya dan memintanya
untuk di-scroll ke tampilan. Dukungan untuk dasar-dasarnya sangat bagus; setiap browser
men-scroll hingga terlihat. Namun, tidak semua browser melakukannya 'smooth'
. Artinya, elemen ini
digulir ke dalam tampilan, bukan dipaskan.
element.scrollIntoView({
behavior: 'smooth'
})
Safari adalah satu-satunya browser yang tidak mendukung behavior: 'smooth'
di sini. Lihat
Kompatibilitas browser
untuk mengetahui update.
Langsung
Sekarang Anda tahu bagaimana saya melakukannya, bagaimana Anda akan?! Mari kita lakukan diversifikasi pendekatan dan mempelajari semua cara untuk membangun di web. Buat Glitch, tweet me versi Anda, dan saya akan menambahkannya ke bagian Remix komunitas di bawah.
Remix komunitas
- @geoffrich_ dengan Svelte: demo & kode
- @GauteMeekOlsen dengan Vue: demo + kode
- @AnaestheticsApp dengan Lit: demo & kode