Hikayeler bileşeni oluşturma

Web'deki Instagram Hikayeleri'ne benzer bir deneyimin nasıl oluşturulacağına dair temel bir genel bakış.

Adam Argyle

Bu gönderide, yakınınızdaki insanlar için bir Hikayeler bileşeni oluşturma klavyeyle gezinmeyi destekleyen ve klavyeyle gezinmeyi destekleyen izin verir.

Demo

Bu Hikayeler bileşenini kendiniz oluşturma işlemini uygulamalı bir şekilde yapmayı tercih ederseniz Hikayeler bileşeni codelab'ine göz atın.

Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:

Genel Bakış

Hikayeler kullanıcı deneyiminin en popüler iki örneği Snapchat Hikayeler ve Instagram Hikayeler'dir (filolardan bahsetmiyorum). Genel olarak kullanıcı deneyimi açısından bakıldığında, Hikayeler genellikle yalnızca mobil cihazlarda gezinme odaklı ve dokunma odaklı bir kalıptır. birden fazla aboneliğe sahip olabilirsiniz. Örneğin, Instagram'da kullanıcılar bir arkadaşının hikayesini açar fotoğrafların üzerinden geçiyor. Genellikle aynı anda birkaç arkadaşıyla gerekir. Kullanıcı, cihazın sağ tarafına dokunarak ilgili arkadaşının bir sonraki hikayeyi inceleyin. Kullanıcı, sağa hızlıca kaydırdığında başka bir arkadaşına geçer. Hikaye bileşeni, banta oldukça benzer ancak bir atlı karıncanın içinde gezinmeye çok boyutlu bir diziye karşılık gelir. Sanki içeride bir bant varmış gibi her bir banttan oluşur. 🤯

Kartlar kullanılarak görselleştirilmiş çok boyutlu dizi. Soldan sağa, mor kenarlıklı kartlar ve içinde 1-çok sayıda camgöbeği kenarlıklı kart bulunuyor. Listeleyin.
1. arkadaş bandı
2. "yığılmış" haber bandı
👍 Bir liste halinde listeleme, yani çok boyutlu bir dizi

Bir iş için doğru araçları seçme

Genel olarak bu bileşenin yapılışını son derece basit buldum. web platformu özellikleri bulunuyor. Şimdi bunları ele alalım.

CSS Izgarası

Sayfa düzenimizde CSS Izgarası açısından büyük bir sıkıntı yoktu, çünkü en etkili tekniklerden biridir.

Arkadaşlar düzeni

Birincil .stories bileşen sarmalayıcımız, mobil öncelikli bir yatay kaydırma görünümüdür:

.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;
}
"Chrome Geliştirici Araçları'nı kullanma" Cihaz Modu Grid tarafından oluşturulan sütunları

grid düzenini ayrıntılı olarak inceleyelim:

  • Mobil cihazlarda görüntü alanını açık bir şekilde 100vh ve 100vw ile dolduruyoruz ve masaüstünde boyutu kısıtlıyoruz
  • /, satır ve sütun şablonlarımızı ayırır
  • auto-flow kelimesinin çevirisi grid-auto-flow: column
  • Otomatik akış şablonu 100% şeklindedir. Bu örnekte, kaydırma penceresi genişliğine eşittir.
ziyaret edin.

Cep telefonunda bunun için satır boyutunu görüntü alanı yüksekliği ve her sütunun görüntü alanı genişliğidir. Snapchat Hikayeler ve Snapchat Hikayeleri ile Örneğin, her sütun bir arkadaşınızın hikayesi olur. Arkadaş istiyoruz olarak devam edeceğinden daha fazla yer bulabiliyoruz. Izgara, HTML'nizin her arkadaş için düzenlenebilmesi için gereken sayıda sütun oluşturur bizim için dinamik ve duyarlı bir kaydırma kapsayıcısı oluşturuyor. Tablo tüm etkiyi merkezileştirmemizi sağladı.

Yığma

Her arkadaşın hikayelerinin sayfalara ayırmaya hazır durumda olması gerekiyor. Animasyon ve diğer eğlenceli kalıplara hazırlanmak için bir yığın seçtim. yığın derken, kastediyorum, gözünüz yandan bakıyor gibi değil.

CSS ızgarasında, satırların burada tek hücreli olduğu (yani bir kare) ve sütunlar bir takma adı ([story]) paylaşır ve ardından her alt sütun bu takma ada atanır takma ada sahip tek hücreli alan:

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

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

Bu yöntem, yığın oluşturma sırasının HTML'sini kontrol etmesine olanak tanır ve aynı zamanda sorunsuz bir şekilde ilerler. absolute konumlandırması veya z-index ile herhangi bir şey yapmamızın gerekmediğine dikkat edin ve height: 100% veya width: 100% ile doğru kutuyu işaretlememiz gerekmiyordu. Üst tablo hikaye resminin görüntü alanının boyutunu zaten tanımladığından bu hikaye bileşenlerinin hiçbiri !

CSS Kaydırma Tutturma Noktaları

CSS Kaydırma Tutturma Noktaları spesifikasyonu, görüntü alanında kilitlenebilirler. Bu CSS özellikleri var olmadan önce JavaScript kullanmak zorundaydınız ve çok zor bir şeydi. Ödeme yap CSS Scroll Snap Points ile tanışın Sarah Drasner tarafından hazırlanmış.

scroll-snap-points stillerle ve bunları kullanmadan yatay kaydırma. Bu olmadan, kullanıcılar her zamanki gibi serbest kaydırma yapabilir. Bu şekilde, tarayıcı da yavaşça her öğe üzerinde kalır.
üst
.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;
}
Fazla kaydırmalı üst öğe, yapışma davranışını tanımlar.
alt
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
Çocuklar hızlı hedef olmayı tercih eder.

Kaydırma Tutturma Puanları'nı birkaç nedenden dolayı seçtim:

  • Ücretsiz erişilebilirlik. Kaydırma Tutturma Noktaları spesifikasyonu, Sol Ok ve Sağ Ok tuşları, tutturma noktalarında hareket etmelidir varsayılan olarak.
  • Süresi artan özellik. Scroll Snap Points spesifikasyonu yeni özellikler ve iyileştirmeler alıyor Bu yüzden Hikayeler bileşenim, muhtemelen yalnızca buradayım.
  • Uygulama kolaylığı. Kaydırma Kaydırma Noktaları, pratik olarak kullanım alanına dayalı olarak yatay sayfalara ayırmanızı sağlar.
  • Serbest platform stili eylemsizlik. Her platform kendi tarzında kaydırılıp duracak olağanüstü bir kaydırma ve dinlenme stiline sahip olabilen normalleştirilmiş eylemsizlik.

Tarayıcılar arası uyumluluk

Opera, Firefox, Safari ve Chrome ile Android ve iOS'te test ettik. İşte özellikler ve destek alanlarında tespit ettiğimiz web özelliklerinin kısa bir özeti.

Ancak bazı CSS'ler geçerli değil. Bu yüzden bazı platformlar şu anda kullanıcı deneyimini sunmuyor. optimize edebilirsiniz. Bu özellikleri yönetme ihtiyacı duymayıp kendime güveniyorum daha sonra diğer tarayıcılara ve platformlara ulaşacaklarını tahmin ediyor.

scroll-snap-stop

Bantlar, CSS Kaydırma Tutturma Noktaları spesifikasyonu. Hikayeler'in aksine, bant her zaman kullanıcı etkileşimde bulunduktan sonra her resim için Herhangi bir sakınca görmeyebilir bantta hızla dolaşabilirsiniz. Hikayeler ise en iyi şekilde tek tek ilerler. scroll-snap-stop tam olarak bunu sağlıyor.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Bu yayını yazdığınız sırada scroll-snap-stop yalnızca Chromium tabanlı cihazlarda destekleniyor izin verir. Ödeme yap Tarayıcı uyumluluğu başlıklı makaleye göz atın. Yine de bu bir engel teşkil etmez. Bu, desteklenmeyen tarayıcılarda kullanıcılar yanlışlıkla bir arkadaşını atlayabilir. Bu nedenle kullanıcılar yalnızca daha dikkatli atlanan bir arkadaşın görüntülendi olarak işaretlenmemesini sağlamak için JavaScript yazmamız gerekir.

Daha fazla bilgi için: özellikleri yardımcı olur.

overscroll-behavior

Aniden bir anda bir kalıcı ileti penceresi pencereyi kaydırmaya başlayacak mısınız? overscroll-behavior geliştiricilerin kaydırmayı yakalamasına git. Her tür durum için uygundur. Hikayelerim bileşeni bunu kullanıyor ve kaydırma hareketlerinin bir bileşenidir.

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

Safari ve Opera, diğer iki tarayıcı tarafından destekler, bu da Hiç sorun değil. Bu kullanıcılar, alışık oldukları gibi fazla kaydırma deneyimi yaşarlar. ve bu geliştirmeyi hiçbir zaman fark etmeyebilir. Kişisel olarak büyük bir hayranım ve uyguladığım neredeyse her fazla kaydırma özelliğinin bir parçası olarak buna dahil ediyorum. Bu bir zararsız ekleme çözümleri var.

scrollIntoView({behavior: 'smooth'})

Bir kullanıcı dokunduğunda veya tıkladığında ve bir arkadaşının hikaye grubunun sonuna ulaştığında, kaydırma tutturma noktası ayarındaki bir sonraki arkadaşa geçmenin zamanı geldi. Entegre bir sonraki arkadaşımızı bulmayı ve ondan başkasının görünümün içine kaydırıldı. Bu konuda temel destek çok iyi; her tarayıcı görünüm içine kaydırdı. Ancak her tarayıcı bunu yapmadı 'smooth'. Bu durum, yerine kaydırılır.

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

Burada behavior: 'smooth', Safari tarafından desteklenmeyen tek tarayıcıydı. Ödeme yap Tarayıcı uyumluluğu başlıklı makaleye göz atın.

Uygulamalı

Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Ürün ve hizmetlerinizi çeşitlendirmek için ve web üzerinde geliştirme yapmanın tüm yollarını öğreneceğiz. Bir Aksak oluşturun sürümünüzü tweet'le gönderin, aşağıdaki Topluluk remiksleri bölümüne bakın.

Topluluk remiksleri