Membuat komponen Stories

Ringkasan dasar tentang cara membangun pengalaman yang serupa dengan Instagram Stories di web.

Adam Argyle

Dalam postingan ini, saya ingin berbagi pemikiran tentang membangun komponen Stories untuk web yang responsif, mendukung navigasi {i>keyboard<i}, dan bekerja di browser.

Demo

Jika Anda lebih suka demonstrasi langsung untuk membangun komponen Stories ini sendiri, lihat codelab komponen Stories.

Jika Anda lebih suka menonton video, berikut versi YouTube untuk postingan ini:

Ringkasan

Dua contoh UX Stories yang populer adalah Snapchat Stories dan Instagram Stories (belum lagi inventaris). Dalam istilah UX umum, Cerita biasanya merupakan pola khusus seluler dan berfokus pada ketukan untuk menavigasi beberapa langganan. Misalnya, di Instagram, pengguna membuka story teman dan menelusuri gambar-gambar di dalamnya. Mereka umumnya melakukan ini ke banyak teman di baik. Dengan mengetuk sisi kanan perangkat, pengguna langsung membuka cerita berikutnya. Dengan menggeser ke kanan, pengguna akan langsung menuju teman yang lain. Komponen {i>Story<i} cukup mirip dengan {i>carousel<i}, tetapi memungkinkan navigasi array multi-dimensi yang berbeda dengan array satu dimensi. Seolah-olah ada korsel di dalam setiap korsel. 🤯

Memvisualisasikan array multi-dimensi menggunakan kartu. Dari kiri ke kanan adalah tumpukan kartu pembatas berwarna ungu, dan di dalam setiap kartu terdapat 1-banyak kartu dengan batas sian. Daftar dalam daftar.
Carousel pertama teman
"ditumpuk" ke-2 carousel artikel
👍 Cantumkan dalam daftar, disebut juga: array multi-dimensi

Memilih {i>tool<i} yang tepat untuk pekerjaan Anda

Secara keseluruhan, saya menemukan bahwa komponen ini cukup mudah untuk dibuat, berkat beberapa fitur platform web yang penting. Mari kita bahas lebih lanjut.

Petak CSS

Tata letak kita ternyata bukan urutan yang tinggi untuk {i>CSS Grid<i} karena dilengkapi dengan beberapa cara yang ampuh untuk mengacaukan konten.

Tata letak Teman

Wrapper komponen .stories utama kami adalah scrollview horizontal berorientasi 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;
}
Menggunakan Chrome DevTools Mode Perangkat untuk menyorot kolom yang dibuat oleh Grid

Mari kita uraikan tata letak grid tersebut:

  • Kita secara eksplisit mengisi area pandang di perangkat seluler dengan 100vh dan 100vw serta membatasi ukuran di desktop
  • / memisahkan template baris dan kolom
  • auto-flow diterjemahkan menjadi grid-auto-flow: column
  • Template autoflow-nya adalah 100%, yang dalam hal ini adalah berapa pun lebar jendela scroll-nya

Pada ponsel, anggaplah ini seperti ukuran baris sebagai tinggi {i>view <i}dan setiap kolom menjadi lebar area pandang. Melanjutkan ke Snapchat Stories dan Contoh Instagram Stories, setiap kolom akan menjadi story seorang teman. Kita ingin teman cerita untuk berlanjut di luar area pandang sehingga kita memiliki tempat untuk men-scroll. {i>Grid<i} akan membuat kolom sebanyak apa pun yang diperlukan untuk mengatur tata letak HTML Anda untuk setiap teman untuk membuat container scroll yang dinamis dan responsif. Petak memungkinkan kita untuk memusatkan seluruh efek.

Tumpukan

Untuk setiap teman, kita memerlukan cerita mereka dalam status siap paginasi. Untuk persiapan animasi dan pola menarik lainnya, saya memilih stack. Ketika saya mengatakan {i>stack<i}, maksud saya seperti Anda sedang melihat ke bawah pada {i>sandwich<i}, bukan seperti Anda melihat dari samping.

Dengan grid CSS, kita dapat menentukan grid sel tunggal (yaitu persegi), tempat baris dan kolom berbagi alias ([story]), lalu setiap turunan ditetapkan ke alias tersebut ruang sel tunggal beralias:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

Ini membuat HTML kita dapat mengendalikan urutan tumpukan dan juga menjaga semua elemen dalam aliran. Perhatikan bahwa kita tidak perlu melakukan apa pun pada pemosisian absolute atau z-index dan kita tidak perlu mengkoreksi kotak dengan height: 100% atau width: 100%. Petak induk sudah menentukan ukuran area pandang gambar cerita, jadi tidak satu pun dari komponen cerita ini perlu diberi tahu untuk mengisinya!

Snap Points Scroll CSS

Spesifikasi Snap Points Scroll CSS membuatnya lebih mudah untuk mengunci elemen ke dalam area pandang saat men-scroll. Sebelum properti CSS ini ada, Anda harus menggunakan JavaScript, dan itu... cukup sulit. Periksa Memperkenalkan Snap Points Scroll CSS oleh Sarah Drasner untuk penjelasan tentang cara menggunakannya.

Scroll horizontal tanpa dan dengan gaya scroll-snap-points. Tanpa ponsel, pengguna dapat menggulir seperti biasa. Dengannya, browser dapat bersandar dengan lembut pada setiap item.
induk
.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;
}
Induk dengan overscroll menentukan perilaku snap.
anak
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
Anak-anak memilih untuk menjadi target instan.

Saya memilih Scroll Snap Points karena beberapa alasan:

  • Aksesibilitas gratis. Spesifikasi Scroll Snap Points menyatakan bahwa menekan Tombol Panah Kiri dan Panah Kanan akan bergerak melalui titik yang dipaskan secara {i>default<i}.
  • Spesifikasi yang terus bertambah. Spesifikasi Scroll Snap Points mendapatkan fitur dan peningkatan baru sepanjang waktu, yang berarti bahwa komponen Stories saya mungkin akan menjadi lebih baik lagi dari terus keluar.
  • Kemudahan penerapan. Snap Points Scroll praktis dibuat untuk kasus penggunaan penomoran horizontal yang berfokus pada sentuhan.
  • Inersia gaya platform gratis. Setiap platform akan men-scroll dan beristirahat dalam gayanya, bukan yang dinormalkan, yang bisa memiliki gaya gulir dan istirahat yang luar biasa.

Kompatibilitas lintas browser

Kami telah mengujinya di Opera, Firefox, Safari, dan Chrome, serta Android dan iOS. Berikut ikhtisar singkat fitur web yang menampilkan perbedaan kemampuan dan dukungannya.

Meskipun kami menggunakan beberapa CSS yang tidak berlaku, sehingga beberapa platform saat ini kehilangan peluang UX pengoptimalan. Saya senang tidak perlu mengelola fitur ini dan merasa percaya diri sehingga mereka akan menjangkau browser dan platform lain.

scroll-snap-stop

Korsel adalah salah satu kasus penggunaan UX utama yang mendorong pembuatan Spesifikasi Snap Points Scroll CSS. Tidak seperti Stories, carousel tidak selalu harus berhenti pada setiap gambar setelah pengguna berinteraksi dengannya. Mungkin saja diperbolehkan atau disarankan untuk dengan cepat menelusuri korsel. 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 menulis postingan ini, scroll-snap-stop hanya didukung di perangkat berbasis Chromium browser. Periksa Kompatibilitas browser untuk mendapatkan info terbaru. Namun, ini bukan pemblokir. Artinya, di browser yang tidak didukung pengguna dapat secara tidak sengaja melewatkan teman. Jadi pengguna hanya perlu lebih berhati-hati, atau kita harus menulis JavaScript untuk memastikan bahwa teman yang dilewati tidak ditandai sebagai telah dilihat.

Baca selengkapnya di spesifikasi jika Anda tertarik.

overscroll-behavior

Pernahkah Anda menelusuri sebuah modal ketika tiba-tiba Anda mulai men-scroll konten di belakang modal? overscroll-behavior membiarkan developer menjebak yang men-scroll dan tidak membiarkannya akan pergi. Ini bagus untuk segala jenis kesempatan. Komponen Stories Saya menggunakannya untuk mencegah gestur geser dan gestur scroll keluar dari komponen.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari dan Opera adalah 2 {i>browser<i} yang tidak mendukung ini, dan itu benar-benar baik-baik saja. Pengguna tersebut akan mendapatkan pengalaman {i>overscroll<i} seperti biasa dan mungkin tidak melihat peningkatan ini. Saya pribadi adalah penggemar berat dan menyertakannya sebagai bagian dari hampir setiap fitur {i>overscroll<i} yang saya terapkan. Ini adalah tambahan yang tidak berbahaya yang hanya dapat mengarah pada peningkatan UX.

scrollIntoView({behavior: 'smooth'})

Ketika pengguna mengetuk atau mengeklik dan telah mencapai akhir rangkaian cerita teman, saatnya berpindah ke teman berikutnya dalam rangkaian titik geser scroll. Dengan JavaScript, kami dapat mereferensikan teman berikutnya dan memintanya untuk di-scroll hingga terlihat. Dukungan untuk dasar-dasar ini sangat bagus; setiap browser men-scroll hingga terlihat. Namun, tidak semua browser melakukannya 'smooth'. Artinya, ini hanya di-scroll ke tampilan, bukan dipaskan.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari adalah satu-satunya browser yang tidak mendukung behavior: 'smooth' di sini. Periksa Kompatibilitas browser untuk mendapatkan info terbaru.

Langsung

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda akan melakukannya?! Mari kita mendiversifikasi pendekatan dan mempelajari semua cara untuk membangun di web. Buat Glitch, tweet saya versi Anda, dan saya akan menambahkannya ke bagian Remix Komunitas di bawah.

Remix komunitas