Web'deki Instagram Hikayeleri'ne benzer bir deneyimin nasıl oluşturulacağına dair temel bir genel bakış.
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.
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. 🤯
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;
}
grid
düzenini ayrıntılı olarak inceleyelim:
- Mobil cihazlarda görüntü alanını açık bir şekilde
100vh
ve100vw
ile dolduruyoruz ve masaüstünde boyutu kısıtlıyoruz /
, satır ve sütun şablonlarımızı ayırırauto-flow
kelimesinin çevirisigrid-auto-flow: column
- Otomatik akış şablonu
100%
şeklindedir. Bu örnekte, kaydırma penceresi genişliğine eşittir.
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ış.
.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; }
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
- Svelte ile @geoffrich_: demo ve kod
- Vue ile @GauteMeekOlsen: demo + kod
- @AnaestheticsApp (Lit: demo ve) kod