Kaydırmalı ürün sayfası (scroll video) nasıl yapılır?

Kaydırmalı ürün sayfası, ziyaretçi sayfayı aşağı kaydırdıkça bir ürün videosunun ya da animasyonun ileri, yukarı kaydırdıkça geri oynadığı tek sayfalık bir tanıtım sitesidir. En yaygın yöntem videoyu kare kare görsellere ayırıp kaydırma konumuna göre doğru kareyi bir canvas öğesine çizmektir.

Bu yazıda tekniğin nereden çıktığını, üç uygulama yöntemini, performans ve erişilebilirlik kurallarını, sık hataları ve Yeşilçam Studios'ta bir montaj videosundan bu tür bir sayfanın nasıl oluşturulduğunu anlatıyoruz.

Kaydırmalı ürün sayfası nedir?

Klasik bir ürün sayfasında video bir oynat düğmesiyle başlar ve kendi hızında akar. Kaydırmalı sayfada ise zamanı ziyaretçi yönetir: kaydırma çubuğu videonun zaman çizelgesine bağlanır. Ziyaretçi durduğunda görüntü de durur; geri kaydırdığında ürün geri sarılır. Bu kontrol hissi, ürünün parçalarını, katmanlarını ya da dönüşünü inceleme fırsatı verir.

Teknik 2010'ların sonunda büyük teknoloji markalarının ürün lansman sayfalarıyla yaygınlaştı. Bir kulaklığın kaydırdıkça parçalarına ayrıldığı ya da bir telefonun kaydırdıkça döndüğü sayfalar, kısa sürede ürün tanıtımının ayırt edici bir dili haline geldi. Bugün aynı yaklaşım küçük markaların açılış sayfalarında da kullanılıyor.

Kaydırmalı animasyon hangi yöntemlerle yapılır?

Yöntem	Nasıl çalışır	Güçlü yanı	Zayıf yanı
Görüntü dizisi ve canvas	Video kare kare görsellere ayrılır; kaydırma oranına göre ilgili kare canvas'a çizilir	Kare isabeti kesin, tüm tarayıcılarda tutarlı	Çok sayıda dosya indirilir
Video zaman atlama	Tek bir video dosyasının oynatma konumu kaydırmaya göre ayarlanır	Tek dosya, küçük boyut	Geri sarmada takılma; video sık anahtar kareyle kodlanmazsa akıcı değildir
CSS kaydırma zaman çizelgesi	CSS animasyonları doğrudan kaydırma konumuna bağlanır	JavaScript gerektirmez, akıcıdır	Video karelerini değil, CSS özelliklerini oynatır; tarayıcı desteği eşit değildir

Ürün videosu oynatmak için en sağlam seçenek görüntü dizisidir. CSS kaydırma zaman çizelgeleri metin, başlık ve kart geçişleri gibi eşlik eden hareketler için uygundur; desteklemeyen tarayıcılarda sayfa düz biçimde çalışmaya devam etmelidir.

Bir kaydırmalı sayfanın bileşenleri nelerdir?

Yapışkan sahne

Animasyonun oynadığı alan, ziyaretçi uzun bir kaydırma bölgesinden geçerken ekranda sabit kalır. Bölgenin yüksekliği animasyonun "süresini" belirler: daha uzun bölge, daha yavaş oynatma demektir.

Kare dizisi

Video, ekran boyutuna uygun çözünürlükte, sıkıştırılmış görsellere ayrılır. WebP gibi modern biçimler dosya boyutunu belirgin biçimde düşürür. Mobil cihazlar için daha küçük bir dizi sunmak yükü ayrıca azaltır.

Metin katmanı

Başlık, özellikler, hikâye ve iletişim bölümleri gerçek HTML metni olarak yazılır. Böylece arama motorları içeriği okur, ekran okuyucular seslendirir ve ziyaretçi metni seçebilir.

Yedek görünüm

Kare dizisi yüklenmeden önce ilk kare bir afiş görseli olarak gösterilir; ziyaretçi boş bir alan görmez.

Kaydırmalı ürün sayfası adım adım nasıl yapılır?

1. Kaynak animasyonu hazırlayın. Montaj / söküm, ürün turu ya da açılma hareketi gibi tek ve net bir hikâyesi olan 5 ile 20 saniyelik bir video seçin.
2. Videoyu karelere ayırın. Saniyede 24 ile 30 kare çoğu durumda yeterlidir; çok uzun videolar dosya sayısını gereksiz artırır.
3. Kareleri sıkıştırın ve iki boyutta (masaüstü ve mobil) hazırlayın.
4. Sayfa iskeletini kurun: yapışkan bir canvas, onu saran uzun bir kaydırma bölgesi ve metin bölümleri.
5. Kaydırma oranını kare numarasına çevirin ve çizimi requestAnimationFrame içinde yapın; her kaydırma olayında doğrudan çizim yapmayın.
6. Kareleri sırayla önceden yükleyin: önce ilk kare ve birkaç ara kare, sonra geri kalanı. Yüklenmemiş bir kareye gelindiğinde en yakın yüklü kareyi gösterin.
7. Hareket azaltma tercihini uygulayın, mobilde test edin ve sayfa hızını ölçün.

Kaydırma konumu kare numarasına nasıl çevrilir?

Tekniğin kalbi basit bir orandır. Yapışkan sahneyi saran bölümün sayfadaki başlangıç konumu ve yüksekliği bilinir. Ziyaretçinin bu bölüm içinde ne kadar ilerlediği, bölüm yüksekliğinden ekran yüksekliği çıkarılarak bulunan kaydırılabilir mesafeye bölünür; sonuç 0 ile 1 arasında bir ilerleme değeridir. Bu değer toplam kare sayısının bir eksiğiyle çarpılıp yuvarlandığında gösterilecek karenin sırası bulunur. İlerleme 0'ın altına düşerse ilk kare, 1'i geçerse son kare gösterilir.

• Canvas'ı ekranın piksel yoğunluğuna göre boyutlandırın; aksi halde yüksek çözünürlüklü ekranlarda görüntü bulanık görünür.
• Görseli canvas'a "kapla" ya da "sığdır" mantığıyla çizin; dikey ekranda ürünün kesilmemesi için hangisinin uygun olduğunu mobilde deneyin.
• Aynı kare yeniden istendiğinde çizimi atlayın; gereksiz çizim pil ve işlemci tüketir.

Kaç kare gerekir ve sayfa ne kadar ağır olur?

Basit bir hesap planlamayı kolaylaştırır. Saniyede 24 kare ile 10 saniyelik bir video 240 kare eder. Her kare sıkıştırıldıktan sonra ortalama 60 KB olsa toplam yaklaşık 14 MB indirilir; aynı kareler sıkıştırılmadan bırakılırsa bu rakam kat kat artar. Ağırlığı düşürmenin üç yolu vardır:

• Kare sayısını azaltmak: kaydırma ile oynatılan bir animasyonda saniyede 12 ile 15 kare çoğu zaman akıcı görünür, çünkü hızı ziyaretçi belirler.
• Çözünürlüğü ekrana göre seçmek: mobil cihaza masaüstü boyutunda kare göndermemek.
• Kademeli yüklemek: önce seyrek aralıklı kareleri, sonra aradakileri indirmek; böylece animasyon erkenden kaba haliyle çalışır ve giderek akıcılaşır.

Kaydırma bölgesinin yüksekliği de deneyimi belirler. Genel bir kural olarak animasyonun her saniyesi için bir ile iki ekran yüksekliği kaydırma alanı ayırmak, ziyaretçinin hareketi rahatça izleyebileceği bir hız verir.

Performans ve erişilebilirlikte nelere dikkat edilmeli?

Kaydırmalı sayfanın en büyük riski ağırlıktır. Yüzlerce kare yüksek çözünürlükte indirilirse sayfa geç açılır ve mobil veri tüketimi artar. Kareleri ekranın gerçekten gösterebileceği çözünürlükte tutun, ilk kareyi hızlı yükleyin ve gerisini kademeli getirin.

Erişilebilirlik tarafında temel kural, işletim sistemindeki hareket azaltma ayarına saygı göstermektir. CSS'teki prefers-reduced-motion sorgusu bu tercihi bildirir; tercih açıksa animasyon yerine durağan bir kare ya da kısa bir görsel dizi gösterilmelidir. Hareket hassasiyeti olan kullanıcılar için büyük ölçekli hareketler baş dönmesine yol açabilir.

• Kaydırmayı ele geçirmeyin: kaydırma hızını değiştiren ya da sayfayı zorla bölümlere kilitleyen kodlar kullanıcıyı yorar.
• Bilgiyi yalnız animasyonun içine koymayın; her önemli mesaj metin olarak da bulunsun.
• Klavyeyle gezinme, odak görünürlüğü ve yeterli metin kontrastı sağlayın.
• Canvas'a anlamlı bir açıklama ekleyin ya da onu süs öğesi olarak işaretleyin.

En sık yapılan hatalar nelerdir?

• Videoyu doğrudan zaman atlamayla oynatmak ve geri kaydırmada takılan bir görüntüyle karşılaşmak.
• Kareleri tam çözünürlükte bırakmak ve sayfayı megabaytlarca ağırlaştırmak.
• Kaydırma bölgesini çok kısa tutmak: animasyon bir anda geçer, ziyaretçi bir şey göremez.
• Metni görselin içine gömmek: arama motoru ve ekran okuyucu içeriği okuyamaz.
• Mobilde test etmemek: dikey ekranda ürün kadrajın dışına taşabilir.

Kaydırmalı sayfa ne zaman doğru seçim değildir?

Her ürün kaydırmalı bir sayfadan fayda görmez. Şu durumlarda klasik bir ürün sayfası daha iyi sonuç verebilir:

• Ziyaretçi hızlıca fiyat ve stok bilgisine ulaşmak istiyorsa, örneğin çok sayıda ürünü olan bir katalogda.
• Ürünün görsel bir hikâyesi yoksa; tek parça ve sade ürünlerde kaydırmalı animasyon yalnız bekleme süresi yaratır.
• Kitlenin büyük kısmı yavaş bağlantıdan geliyorsa.

Kaydırmalı sayfanın başarısı nasıl ölçülür?

Etkileyici görünmek tek başına başarı değildir. Yayından sonra şu ölçümleri izlemek, sayfanın gerçekten işe yarayıp yaramadığını gösterir:

• Kaydırma derinliği: ziyaretçilerin ne kadarı animasyonun sonuna ulaşıyor.
• Eylem çağrısı tıklamaları: animasyondan sonra gelen düğmeye tıklayanların oranı.
• İlk görünür içeriğin yüklenme süresi: afiş karesi ne kadar hızlı görünüyor.
• Mobil ve masaüstü farkı: aynı sayfa iki cihaz grubunda farklı davranabilir.

Yeşilçam Studios'ta kaydırmalı ürün sayfası nasıl yapılır?

Website Studio, Film Studio'da hazırladığınız bir Montaj / Söküm videosunu, ziyaretçi kaydırdıkça kare kare oynayan tek sayfalık bir ürün sitesine dönüştürür. Videoyu montaj / söküm animasyonu ile hazırladıktan sonra hazır videoda "Videodan site oluştur" düğmesine basmanız yeterlidir.

1. Kaynak videoyu seçin. İsterseniz ikinci sahne olarak başka bir Montaj videosu ya da bir görsel ekleyin.
2. Marka adı, ürün adı, ana başlık ve metinleri yazın; tüm alanlar isteğe bağlıdır, boş bıraktıklarınızı Sam ürününüze uygun örnek içerikle doldurur.
3. İsterseniz web sitenizin adresini girin; ana sayfanız ve bir iç sayfanız okunarak marka adı, renkler, logo ve metinler alınır.
4. Menü bölümlerini (Özellikler, Hikâye, Galeri, SSS, İletişim), tema rengini, site dilini ve arka planı seçin. Arka plan olarak Mürekkep Manzara seçilirse hareket azaltılmış cihazlarda durağan kalır.
5. Galeri için yalnız video karelerini kullanabilir (ücretsiz) ya da en fazla 8 görsel üretebilirsiniz.
6. "Sam ile siteyi oluştur" düğmesine basın.

Site hazır olduğunda görünürlüğü "Yalnız siz" ya da "Herkese açık" olarak ayarlayabilir, önizleme bağlantısını paylaşabilir ya da siteyi ZIP olarak indirebilirsiniz. Metinleri ve temayı sonradan düzenleyip yeniden paketlemek ücretsizdir. Basic liste fiyatıyla site kurulumu 8.751 jeton, üretilen her görsel 8.751 jetondur; metin yazımı teklifte ayrıca gösterilir ve Free planda ×1,3, Pro planda ×0,8 çarpanı uygulanır. Ayrıntılar Website Studio rehberinde ve yayınlama rehberinde, güncel fiyatlar fiyat sayfasında.

Örnek: bir kahve makinesi markası için kaydırmalı sayfa

Küçük bir markanın yeni espresso makinesini tanıttığını düşünelim. Ürün fotoğrafından "Bütünden parçalara" akışıyla 10 saniyelik bir Montaj / Söküm videosu hazırlanır: gövde, su haznesi, portafiltre ve buhar çubuğu sırayla ayrılır. Ardından hazır videoda "Videodan site oluştur" seçilir.

1. Marka ve metin bölümünde marka adı ile ürün adı yazılır; "Metinler ve ana mesajlar" alanına teslimat, garanti ya da tasarım yeri gibi iki üç gerçek bilgi eklenir.
2. Markanın mevcut web sitesi varsa adresi girilir; renkler, logo ve metinler oradan alınır.
3. Menüde Özellikler, Hikâye, SSS ve İletişim bölümleri seçilir; iletişim bilgileri olarak e-posta, adres ve sosyal medya bağlantıları eklenir.
4. Renk ve tema için Otomatik, Koyu ya da Açık seçilir; vurgu rengi markadan seçilebilir.
5. Galeri için ücretsiz olan "Yalnız video karelerini kullan" seçeneği ile başlanır; daha sonra gerekirse gerçekçi ortam görselleri üretilir.

Site hazır olduktan sonra neler düzenlenebilir?

Site oluşturulduktan sonra metinler beş grupta düzenlenir: Açılış (üst satır, başlık, alt başlık, düğmeler), Bölümler (özellikler, parça adları, hikâye, teknik özellikler, galeri açıklamaları, sık sorulan sorular), İletişim, Tema ve Arama motorları. Son grupta sayfa başlığı ve sayfa açıklaması yazılır; bunlar arama sonuçlarında görünen metinlerdir. Önizleme masaüstü ve mobil görünüm arasında değiştirilebilir. Değişiklikler "Kaydet ve yeniden paketle" ile yayına alınır; yeniden paketleme tamamlanamazsa önceki sürüm yayında kalır. Aynı anda en fazla iki site hazırlanabilir.

Sık sorulanlar

Kaydırmalı sayfa SEO'ya zarar verir mi? Metin gerçek HTML olarak yazıldığı ve sayfa hızlı açıldığı sürece hayır. Sorun, içeriğin yalnız görsellerin içinde kalması ve sayfanın ağırlaşmasıyla ortaya çıkar.

Video mu, kare dizisi mi kullanmalıyım? Kaydırmaya bağlı oynatmada kare dizisi daha tutarlıdır; video dosyası küçük olsa da geri sarmada takılabilir. Normal oynatılan arka plan videoları için video dosyası yeterlidir.

prefers-reduced-motion nedir? Kullanıcının işletim sisteminde hareketi azaltma tercihini web sayfasına bildiren CSS medya sorgusudur. Bu tercih açıkken büyük animasyonların durdurulması ya da sadeleştirilmesi beklenir.

Kaydırmalı sayfa mobilde çalışır mı? Evet, ancak kareler mobil ekrana uygun boyutta hazırlanmalı ve dikey kadrajda ürünün görünürlüğü test edilmelidir.

Website Studio'da sıfırdan, videosuz site yapılabilir mi? Ekim 2026 itibarıyla siteler bir Montaj / Söküm videosundan oluşturulur. Yalnız tarifle site oluşturma uygulamada "yakında" olarak duyurulmuştur.

Herkese açık site arama motorlarında görünür mü? Görünürlük "Herkese açık" olduğunda bağlantıyı bilen herkes siteyi görebilir ve site arama motorlarında listelenebilir. "Yalnız siz" seçiliyken siteyi yalnız siz, uygulama içinden görebilirsiniz.

Sitenin metinlerini sonradan değiştirebilir miyim? Evet. Metinleri, temayı ve arama motoru başlığını düzenleyip "Kaydet ve yeniden paketle" ile güncelleyebilirsiniz; yeniden paketleme ücretsizdir.