Blok Giriş Animasyonları (Kaydırınca Belirme)
Bir blok ziyaretçinin ekranına girdiğinde belirerek/kayarak gelir. Ayar her blokta aynı yerde durur; hazır efektlerden birini seçmeniz yeterlidir.
Nerede bulunur: Tema Editörü → bir blok seçin → sağdaki özellikler panelinde Animasyon sekmesi Kimler için: Vitrinine hareket katmak isteyen herkes Kısaca: Bir blok ziyaretçinin ekranına girdiğinde belirerek/kayarak gelir. Ayar her blokta aynı yerde durur; hazır efektlerden birini seçmeniz yeterlidir.
Ne işe yarar?
Varsayılan olarak bloklar sayfaya "birden" düşer. Giriş animasyonu, ziyaretçi sayfayı aşağı kaydırdıkça blokların yumuşakça belirmesini sağlar — sayfa daha canlı ve modern görünür.
Bu genel bir ayardır: tek tek bloklara özel bir şey değildir. Hangi bloğu seçerseniz seçin (Hero, Ürün Listesi, Görüş Kartları, hatta ızgara içindeki alt bloklar) özellikler panelinde aynı Animasyon sekmesini bulursunuz.
İstisna: Header (üst menü) bloğunda animasyon sekmesi yoktur. Header sayfa boyunca sabit durduğu için giriş animasyonu anlamlı olmaz.
Nerede bulurum?
- Tema Editörü'nü açın.
- Tuvalden bir blok seçin (veya soldaki katman listesinden tıklayın).
- Sağdaki özellikler panelinde sekmelere bakın; en sonda Animasyon sekmesi vardır.
Efektler (presetler)
Giriş Animasyonu kutusundan birini seçersiniz. Açıklaması da yazar: "Blok görüş alanına girdiğinde oynatılacak animasyon".
| Efekt | Ne yapar? |
|---|---|
| Yok | Animasyon yok (varsayılan). Blok normal şekilde görünür. |
| Belirme | Şeffaftan tam görünüre geçer. |
| Aşağıdan Kayma | Biraz aşağıdan yukarı süzülerek gelir. |
| Yukarıdan Kayma | Biraz yukarıdan aşağı süzülerek gelir. |
| Soldan Kayma | Soldan içeri kayar. |
| Sağdan Kayma | Sağdan içeri kayar. |
| Büyüyerek Belirme | Hafifçe küçükken normal boyutuna büyür. |
| Bulanıklıktan Netleşme | Bulanıkken netleşir. |
En güvenli ve en çok kullanılan ikili: Belirme ve Aşağıdan Kayma. Sayfanın her bloğuna farklı bir efekt vermek yerine bir-iki efekte sadık kalmak daha şık durur.
İnce ayarlar
Bir efekt seçtiğinizde altında şu kaydırıcılar açılır (Yok seçiliyken gizlidirler):
| Ayar | Ne yapar? | Varsayılan |
|---|---|---|
| Süre | Animasyonun ne kadar süreceği. | 600 ms |
| Gecikme | Blok göründükten sonra ne kadar beklenip başlanacağı. | 0 ms |
| Mesafe | Kayma efektlerinde ne kadar uzaktan geleceği; Büyüyerek Belirme'de büyüme derinliği, Bulanıklıktan Netleşme'de bulanıklık miktarı. | 24 px |
| Görünürlük Eşiği | Bloğun yüzde kaçı ekrana girince animasyonun başlayacağı. | %15 |
| Sadece bir kez oynat | Açıkken animasyon bir kez oynar. "Kapalıyken blok her görüş alanına girdiğinde yeniden oynar." | Açık |
| Öğeleri sırayla göster | Liste/ızgara içeren bloklarda öğeler tek tek belirir (stagger). | Kapalı |
| Öğe Aralığı | Sırayla gösterimde öğeler arasındaki gecikme. | 80 ms |
"Öğeleri sırayla göster" hangi bloklarda işe yarar? Ürün listesi, görüş kartları, blog listesi gibi içinde çok öğe olan bloklarda. Tek parça bir bloktaysanız (ör. tek başlık) fark etmez. En fazla ilk 12 öğe sırayla belirir; kalanlar birlikte gelir.
Süreleri abartmayın. 600 ms üstü değerler sayfayı "yavaş" hissettirir; ziyaretçi içeriğin gelmesini beklemek zorunda kalır.
Editörde önizleme
Editör tuvalinde bloklar durağan durur — her tıklamada animasyon oynasaydı çalışmak imkânsız olurdu.
Animasyonu görmek için Önizle düğmesine basın: editör o bloğa kaydırır ve animasyonu bir kez oynatır.
Erişilebilirlik: hareket azaltma
Panelde şu not yazılıdır: "Ziyaretçi cihazında hareket azaltma açıksa animasyon uygulanmaz, içerik doğrudan görünür."
Bazı ziyaretçiler (baş dönmesi, denge sorunu vb. nedenlerle) işletim sistemlerinde "hareketi azalt" ayarını açar. Bu ziyaretçilerde animasyon çalışmaz, içerik doğrudan görünür. Bu doğru davranıştır ve sizden bir şey yapmanızı gerektirmez.
İçerik hiçbir koşulda kaybolmaz: JavaScript çalışmasa bile bloklar sayfada görünür durumdadır. Yani animasyon, içeriğin görünürlüğünü riske atmaz — arama motorları da içeriği normal şekilde görür.
Adım adım: ana sayfaya şık bir giriş efekti
- Tema Editörü → ana sayfa şablonunu açın.
- Hero bloğunu seçin → Animasyon → Belirme, Süre 600 ms.
- Altındaki "Öne Çıkan Ürünler" bloğunu seçin → Aşağıdan Kayma, Gecikme 100 ms.
- Aynı blokta Öğeleri sırayla göster'i açın, Öğe Aralığı 80 ms.
- Önizle ile kontrol edin, sonra şablonu Kaydet ve Yayınla.
Sık sorulanlar
Animasyon sekmesini göremiyorum. Seçtiğiniz blok Header olabilir; header'da bu sekme yoktur. Başka bir blok seçip tekrar bakın.
Vitrinde animasyon çalışmıyor. Sırasıyla: (1) preset Yok olabilir, (2) şablonu yayınlamamış olabilirsiniz, (3) ziyaretçi cihazında hareket azaltma açık olabilir.
Mobilde farklı bir ayar verebilir miyim? Evet. Animasyon alanı da editörün cihaz bazlı ayar (breakpoint) mekanizmasına dahildir — mobil görünümdeyken değiştirdiğiniz değer yalnız mobilde geçerli olur (bkz. Cihaz Bazlı Ayarlar (Masaüstü / Tablet / Mobil)).
Sayfa yavaşlar mı? Hayır. Animasyon için ek bir dosya/paket yüklenmez; tarayıcının kendi geçiş yetenekleri kullanılır.
Tüm bloklara tek seferde animasyon verebilir miyim? Hayır, ayar blok bazlıdır. Zaten önerilen de budur: her blok animasyonlu bir sayfa yorucu olur.
Bu sayfa faydalı oldu mu?