Bu siteyi nasıl yaptık: Kaydırdıkça oynayan film

Ana sayfamızı açtığınızda karşınıza "Işıklar, Kamera, Against" adlı kısa bir film çıkıyor: bir lamba yanıyor, ışıklar ve kamera hazırlanıyor, lens açılıyor ve sonunda Against'in A harfi ışıkla beliriyor. Bilgisayarda bu film kendi kendine oynamıyor. Sayfayı kaydırdıkça ilerliyor, geri kaydırınca geri sarılıyor. Bu yazıda bu etkiyi nasıl kurduğumuzu anlatıyoruz.

Neden kaydırmayla?

Bir ajans sitesinin ilk ekranı genellikle bir showreel ya da büyük bir başlık olur. Biz izleyicinin filmin hızını kendisinin belirlemesini istedik. Kaydırma, ziyaretçiyi izleyiciden yönetmene dönüştürüyor. Filmin dört sahnesi, ekrandaki dört başlıkla eşleşiyor: Her sahne değiştiğinde başlık da değişiyor.

Teknik olarak ne yapıyoruz?

Kaydırmayla oynayan bir video, normal bir videodan farklı hazırlanmalı. Videolar genellikle sıkıştırılırken her birkaç saniyede bir tam kare saklar, aradaki kareler sadece değişiklikleri tutar. Kaydırırken ileri geri atlamak bu yüzden takılabilir. Filmi her 8 karede bir tam kare olacak şekilde yeniden kodladık. Dosya biraz büyüdü, ama her kareye hızlı ulaşmak mümkün oldu.

Video, kaydırma başlamadan önce tamamen indiriliyor. Bu sırada ekranda küçük bir yükleme halkası ve filmin ilk karesi duruyor. Kaydırma hareketi doğrudan videoya değil, onu yumuşatan bir ara katmana bağlı. Böylece film hızlı kaydırmalarda bile akıcı ilerliyor.

Durduğunuzda da hareket var

Sayfa durduğunda film tamamen donmuyor. Bulunduğu kareye yakın birkaç kare arasında çok yavaş, nefes alır gibi gidip geliyor. Böylece ekran hiçbir zaman fotoğraf gibi durmuyor.

Telefonda farklı

Telefonlarda kaydırmayla video kontrol etmek hem pil hem veri açısından ağır ve parmakla kaydırmada aynı hissi vermiyor. Bu yüzden telefonlarda filmin daha hafif bir versiyonu kendiliğinden döngü hâlinde oynuyor. Başlıklar yine sahnelerle birlikte değişiyor. İstendiğinde filmi durdurmak için bir buton var.

Hareketi azaltmak isteyenler için

İşletim sisteminde hareket azaltma tercihini açmış kullanıcılar için film hiç oynamıyor. Bunun yerine filmin son karesi, son başlıkla birlikte gösteriliyor. Erişilebilirliği sonradan eklenen bir özellik olarak değil, tasarımın bir parçası olarak düşünüyoruz. Bu konuyu erişilebilirlik yasası yazımızda ayrıca ele aldık.

Hız

Filmin bilgisayar versiyonu yaklaşık 3,4 MB, telefon versiyonu 1,1 MB. Sayfanın geri kalanı film yüklenirken çalışmaya devam ediyor. Video ağırlıklı sitelerde hızı nasıl koruduğumuzu Core Web Vitals yazımızda anlattık.

Sonuç

Bir web sitesinin ilk ekranı, markanın ilk cümlesi. Bizim cümlemiz bir film, ve o filmi ziyaretçinin eline vermek istedik. Siteniz için benzer bir deneyim düşünüyorsanız web tasarım ve geliştirme sayfamıza göz atın.