Web'deki Instagram Stories'e benzer bir deneyimin nasıl oluşturulacağına dair temel bilgiler.
Bu yayında, web için duyarlı, klavyeyle gezinmeyi destekleyen ve tarayıcılarda çalışan bir Hikayeler bileşeni oluşturma konusundaki düşüncelerimizi paylaşmak istiyorum.
Bu Hikayeler bileşenini kendiniz oluşturma hakkında uygulamalı bir gösterim isterseniz Hikayeler bileşeni codelab'e göz atın.
Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:
Genel bakış
Hikayeler kullanıcı deneyiminin iki popüler örneği, Snapchat Hikayeler ve Instagram Hikayeler'dir (filolar dahil değildir). Genel kullanıcı deneyimi terimleriyle, Hikayeler genellikle birden fazla abonelikte gezinmek için yalnızca mobil cihazlarda ve dokunma odaklı bir kalıptır. Örneğin, Instagram'da kullanıcılar bir arkadaşlarının hikayesini açıp içindeki resimlere göz atıyor. Genellikle bunu aynı anda çok sayıda arkadaşıyla yaparlar. Kullanıcı cihazın sağ tarafına dokunduğunda bir sonraki arkadaşının hikayesine atlıyor. Kullanıcı, sayfayı sağa kaydırdığında başka bir arkadaşına atlar. Hikaye bileşeni, banta oldukça benzerdir, ancak tek boyutlu bir dizi yerine çok boyutlu bir dizide gezinmeye olanak tanır. Her bandın içinde bir bant var gibidir. 🤯
İş için doğru araçları seçme
Sonuçta, birkaç kritik web platformu özelliği sayesinde bu bileşenin oluşturulmasını oldukça kolay buldum. Bu adımlara bakalım.
CSS Tablosu
İçerik hazırlamanın bazı güçlü yollarına sahip olduğundan CSS ızgarası için düzenimizin zorlayıcı olduğu ortaya çıktı.
Arkadaşlar düzeni
Birincil .stories
bileşeni 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üzeninin dökümünü inceleyelim:
- Mobil cihazlarda görüntü alanını açık bir şekilde
100vh
ve100vw
ile doldurur ve masaüstünde boyutu sınırlandırırız /
, satır ve sütun şablonlarımızı ayırırauto-flow
,grid-auto-flow: column
anlamına gelir- Autoflow şablonu
100%
; bu örnekte, kaydırma penceresi genişliği
Cep telefonlarında bunu, satır boyutunun görüntü alanı yüksekliği ve her sütunun görüntü alanı genişliği gibi düşünebilirsiniz. Snapchat Hikayeleri ve Instagram Hikayeler örneğinden gidersek her sütun bir arkadaşınızın hikayesi olacak. Arkadaş hikayelerinin görüntü alanının dışında da devam etmesini istiyoruz, bu yüzden ekranı kaydırabileceğimiz bir yer var. Izgara, her arkadaş hikayesi için HTML'nizi düzenlemek için ihtiyaç duyduğu kadar çok sütun sağlar ve böylece bizim için dinamik ve duyarlı bir kaydırma kapsayıcısı oluşturur. Grid tüm etkiyi merkezileştirmemizi sağladı.
Yığma
Her arkadaşınızın hikayelerini sayfalara ayırmaya hazır bir durumda tutmamız gerekir. Animasyon ve diğer eğlenceli desenler için bir yığın seçtim. Yığın derken, mesela bir sandviçi aşağıya bakıyorsun, kenardan bakıyormuşsunuz gibi değil.
CSS ızgarasıyla, satır ve sütunların bir takma adı ([story]
) paylaştığı tek hücreli ızgara (ör.kare) tanımlayabiliriz. Ardından her alt öğe bu örtüşen tek hücreli alana atanır:
.user {
display: grid;
grid: [story] 1fr / [story] 1fr;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.story {
grid-area: story;
background-size: cover;
…
}
Bu, HTML'mizin yığma sırasını kontrol etmesini sağlar ve aynı zamanda tüm öğelerin akış içinde kalmasını sağlar. absolute
konumlandırması veya z-index
için herhangi bir şey yapmamıza ve height: 100%
ya da width: 100%
ile düzeltme yapmamız gerekmediğine dikkat edin. Üst tablo, hikaye resmi görüntü alanının boyutunu zaten tanımlamıştı. Bu nedenle, bu hikaye bileşenlerinin hiçbirinin içeriği doldurması için söylenmesi gerekmez.
CSS Kaydırma Yapıştırma Noktaları
CSS Kaydırma Noktaları Özelliği, kaydırma sırasında öğelerin görüntü alanına kilitlenmesini çocuk oyuncağı haline getirir. Bu CSS özellikleri mevcut olmadan önce JavaScript'i kullanmanız gerekiyordu ve açık bir şekilde söylemek gerekirse bu zordu. Bunları nasıl kullanacağınıza ilişkin harika bir döküm için Sarah Drasner'ın CSS Scroll Snap Points (CSS Kaydırma Noktalarıyla Tanışın) başlıklı yazısına göz atın.
.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 Noktalarını seçmemin birkaç nedeni vardır:
- Ücretsiz erişilebilirlik. Kaydırma Yapışma Noktaları spesifikasyonu, Sol Ok ve Sağ Ok tuşlarına basıldığında varsayılan olarak tutturma noktaları arasında hareket etmeniz gerektiğini belirtir.
- Artan bir özellik. Kaydırma Snap Puanları spesifikasyonu sürekli yeni özellikler ve iyileştirmeler alıyor. Bu da Hikayeler bileşenimin muhtemelen bundan sonra daha iyi bir hale geleceği anlamına geliyor.
- Uygulama kolaylığı. Kaydırma Tutturma Noktaları, neredeyse dokunma merkezli yatay sayfalandırma kullanım alanı için oluşturulmuştur.
- Ücretsiz platform stili eylemsizlik. İnanılmaz bir kaydırma ve dinlenme tarzına sahip olabilen normalleştirilmiş ataletin aksine, her platform kendi tarzında kayıp durur.
Tarayıcılar arası uyumluluk
Opera, Firefox, Safari ve Chrome'un yanı sıra Android ve iOS'ta test ettik. Aşağıda özellikler ve destek açısından farklılıklar bulduğumuz web özelliklerinin kısa bir özetini bulabilirsiniz.
Ancak bazı CSS'ler uygulanmadı. Bu nedenle, şu anda bazı platformlar kullanıcı deneyimi optimizasyonlarını kaçırıyor. Bu özellikleri yönetmek zorunda kalmaktan keyif almadım ve nihayetinde diğer tarayıcı ve platformlara ulaşacaklarından eminim.
scroll-snap-stop
Bantlar, CSS Kaydırma Puanları özelliğinin oluşturulmasını sağlayan başlıca kullanıcı deneyimi kullanım alanlarından biriydi. Hikayeler'in aksine, bir bandın kullanıcı etkileşimde bulunduktan sonra her resimde durması gerekmez. Bantta hızlı bir şekilde dolaşmak
tavsiye edilebilir veya teşvik edilebilir. Öte yandan, hikayeler en iyi şekilde tek tek yönetilir. scroll-snap-stop
, tam olarak da bunu sağlar.
.user {
scroll-snap-align: start;
scroll-snap-stop: always;
}
Bu yayın yazıldığı sırada scroll-snap-stop
yalnızca Chromium tabanlı tarayıcılarda desteklenmektedir. Güncellemeler için Tarayıcı uyumluluğu'na göz atın. Yine de engel teşkil etmez. Desteklenmeyen tarayıcılarda, kullanıcıların arkadaşlarını
yanlışlıkla atlayabilecekleri anlamına gelir. Bu yüzden kullanıcıların daha dikkatli olması gerekir, yoksa atlanan bir arkadaşın "görüntülendi" olarak işaretlenmemesi için JavaScript'i yazmamız gerekir.
İlginizi çekiyorsa daha fazla bilgiyi özelliklerde bulabilirsiniz.
overscroll-behavior
Hiç aniden modanın arkasındaki içeriği
kaydırmaya başladığınızda modelde kaydırma yaptığınız oldu mu?
overscroll-behavior
, geliştiricinin ekranı kaydırmasına izin verip asla bırakmamasını sağlar. Her türlü durum için uygundur. Hikayelerim bileşeni, ek kaydırma işlemlerinin ve kaydırma hareketlerinin bileşenden ayrılmasını önlemek için bunu kullanır.
.stories {
overflow-x: auto;
overscroll-behavior: contain;
}
Safari ve Opera, bunu desteklemeyen 2 tarayıcıydı ve bunda sorun yok. Bu kullanıcılar alışkın oldukları gibi kaydırma deneyimi yaşar ve bu geliştirmeyi asla fark etmeyebilir. Kişisel olarak büyük bir hayranıyım ve bunu uyguladığım neredeyse her fazla kaydırma özelliğinin bir parçası olarak dahil etmek hoşuma gidiyor. Bu, yalnızca daha iyi bir kullanıcı deneyimi sağlayabilecek zararsız bir eklemedir.
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ı grubunda sonraki arkadaşa geçmenin zamanı gelmiş demektir. JavaScript ile bir sonraki arkadaşa başvurup onun görünüme kaydırılmasını isteyebildik. Bu konuda temel bilgiler harika oldu; her tarayıcı ekranı kaydırdı. Ancak tüm tarayıcılar bunu yapmadı 'smooth'
. Yani, tutturulmak yerine
görünüme kaydırılır.
element.scrollIntoView({
behavior: 'smooth'
})
Safari, burada behavior: 'smooth'
uygulamasını desteklemeyen tek tarayıcıydı. Güncellemeler için Tarayıcı uyumluluğu'na göz atın.
Uygulamalı
Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Glitch oluşturup versiyonunu tweet'le bana gönder, ardından bunu aşağıdaki Topluluk remiksleri bölümüne eklerim.
Topluluk remiksleri
- @geoffrich_ - Svelte: demo ve code
- @GauteMeekOlsen ve Vue: demo + code
- Lit ile @AnaestheticsApp: demo ve kod