Kaydırmayla Bağlantılı Animasyonları Ayarlama
Öğeler görünür alana girdiğinde CSS animasyonlarını tetikleyin
Kaydırmayla Bağlantılı Animasyonları Ayarlama, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Amaç
Kaydırmaya bağlı animasyonlar, öğelerin görünürlüğüne göre oynatılır, duraklatılır veya tersine çevrilir. Örnekler: bir bölüm görünüm alanına kaydırıldığında yavaşça görünen bir açılış görseli, görünür olduğunda artmaya başlayan bir sayı ve kaydırma konumuna bağlı bir paralaks efekti. Animasyonları IntersectionObserver tetikler; CSS veya Web Animasyonları API'si çalıştırır.
Tetikleyici Tabanlı Animasyonlar
En basit düzen şudur: Bir öğe görünüm alanına girdiğinde animasyonu içeren bir CSS sınıfı ekleyin. Gözlemcinin geri çağırma işlevinde entry.target.classList.add("in-view") kullanılır; sınıf, animation: fade-in 600ms forwards tanımını içerir.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}Gözlemci Kurulumu
Paylaşılan bir gözlemci oluşturun, tetikleyici sınıfına sahip her öğeyi gözlemleyin, kesişimde "görünümde" sınıfını ekleyin ve yeniden tetiklenmeyi önlemek için gözlemden çıkarın. Tek seferlik animasyonlar için gerekenler bunlardır; yeniden girişte tekrarlanan animasyonlar için gözlemden çıkarmayın ve çıkışta sınıfı kaldırın.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));Kademeli Efektler
Bir listedeki öğelerin sırayla görünmesi için CSS özel özelliği aracılığıyla her öğeye ayrı bir gecikme uygulayın: her öğede style="--delay: ${i * 100}ms"; animasyon, animation-delay: var(--delay) değerini okur. Liste görünüm alanına girdiğinde öğeler art arda canlanır.
Daha Erken Tetikleme Eşiği
threshold: 0.2, öğenin %20'si görünür olduğunda tetiklenir; bu genellikle "görünümde" animasyonları için iyi bir andır. threshold: 0 çok erken tetiklenir (tek bir piksel bile yeterlidir) ve ani görünür; threshold: 1 ise çok geç tetiklenir (öğe tamamen görünür olduğunda) ve gecikmeli hissettirir.
Kaydırmaya Bağlı ve Kaydırmayla Tetiklenen Animasyonlar
Kaydırmayla tetiklenen animasyonlar kesişimde bir kez oynatılır (yukarıda ele alındı). Kaydırmaya bağlı animasyonlar, ilerlemelerini kaydırma konumuyla eş zamanlı olarak sürdürür. Modern yaklaşım, CSS kaydırmayla çalıştırılan animasyonları kullanmaktır (animation-timeline: scroll()); IntersectionObserver ise tetikleme bölgelerine giriş ve çıkışlarda hâlâ kullanışlıdır.
Yerleşim Karmaşasını Önleme
GPU'nun düşük maliyetle dönüştürebildiği özellikleri canlandırın: dönüşüm ve opaklık. Üst, sol, genişlik ve yükseklik değerlerini canlandırmaktan kaçının; bunlar her karede yerleşimi tetikler ve orta sınıf cihazlarda kaydırmaya bağlı animasyonların takılmasına neden olur.
Azaltılmış Hareket Tercihine Uyma
Animasyon tanımlarını @media (prefers-reduced-motion: no-preference) içine alarak azaltılmış hareket isteyen kullanıcıların (vestibüler bozuklukları veya hassasiyeti olanların) hareket olmadan sabit son durumu görmesini sağlayın. Dekoratif animasyonlar, azaltılmış hareket tercihi etkin olduğunda tamamen devre dışı bırakılmalıdır.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}Performans Deseni
Her öğe için ayrı bir gözlemci yerine tek bir paylaşılan gözlemci kullanın. Tek seferlik animasyon tetiklendikten sonra unobserve kullanın. Değişiklik bildirimi özelliğini ölçülü kullanın; yalnızca o anda canlanan öğelerde kullanın ve animasyon sona erdiğinde kaldırın. Atlanan kareleri görmek için Performans panelini izleyin.
Çift Yönlü Animasyonlar
Öğe görünüm alanından çıktığında tersine dönmesi gereken animasyonlar için gözlemden çıkarmayın. Geri çağırma işlevinde sınıfı isIntersecting değerine göre değiştirin: entry.target.classList.toggle("in-view", entry.isIntersecting). Animasyon girişte ileri doğru çalışır, çıkışta tersine döner.
Web Animasyonları API'si ile Birleştirme
JS ile çalıştırılan animasyonlarda classList.add yerine entry.target.animate(keyframes, options) kullanın. WAAPI, duraklatabileceğiniz, tersine çevirebileceğiniz veya vaatler aracılığıyla zincirleyebileceğiniz bir Animasyon nesnesi döndürür; karmaşık diziler için CSS'ten daha esnektir.
Bilgi Kontrolü
Kaydırmaya bağlı animasyonlarda üst/sol/genişlik/yükseklik değerlerini canlandırmak yerine dönüşüm ve opaklığı canlandırmak neden tercih edilir?
Özet
Kaydırmaya bağlı animasyonlar, IntersectionObserver ile CSS animasyon sınıflarını veya WAAPI'yi birleştirir. Gizli bir durum belirleyin, kesişimde "görünümde" sınıfını ekleyin, üst/sol değerleri yerine dönüşüm ve opaklığı canlandırın, azaltılmış hareket tercihi ayarına uyun ve art arda görünmeler için CSS özel özellikleri aracılığıyla kademeli gecikmeler uygulayın. Tam kaydırma ilerlemesi animasyonları için yerel kaydırmayla çalıştırılan animasyonları (animation-timeline: scroll()) değerlendirin.
Sıkça Sorulan Sorular
“Kaydırmayla Bağlantılı Animasyonları Ayarlama” dersi ücretsiz mi?
Evet — “Kaydırmayla Bağlantılı Animasyonları Ayarlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Kaydırmayla Bağlantılı Animasyonları Ayarlama” dersinde ne öğreneceğim?
Öğeler görünür alana girdiğinde CSS animasyonlarını tetikleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Kaydırmayla Bağlantılı Animasyonları Ayarlama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- IntersectionObserver API ve Eşikler
- IntersectionObserver ile Tembel Yükleme
- Sonsuz Kaydırma Uygulaması
- Kaydırmayla Bağlantılı Animasyonları Ayarlama