JavaScript Academy · Ders

Kaydırmayla Tetiklenen Animasyonlar

Öğeleri görünüm alanına girdiklerinde canlandırın.

Kaydırmayla Tetiklenen Animasyonlar, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Kaydırmada Animasyon Oluşturma

Yaygın bir efekt, kullanıcı bir öğeye kaydırarak ulaştığında öğeyi görünür alana soluklaşarak veya kayarak getirmektir. IntersectionObserver bunu düzenli hâle getirir: bir öğe görünüm alanına girdiğinde CSS sınıfı ekleyin ve animasyonu CSS'in yönetmesine izin verin.

CSS Tarafı

CSS içinde gizli bir başlangıç durumu ve görünür bir bitiş durumu tanımlayın. JavaScript yalnızca bir sınıfı açıp kapatır; geçiş tamamen CSS tarafından yapılır ve bu da animasyonu akıcı tutar.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Hedefleri Seçme

Animasyon uygulamak istediğiniz öğeleri ortak bir sınıfla işaretleyin ve ardından bu öğeleri toplayın.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Observer Oluşturma

Animasyonun yalnızca bir piksel göründüğünde değil, öğenin anlamlı bir bölümü görünür olduğunda başlaması için bir eşik kullanın.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Sınıfı Ekleme

Geri çağırımda, kesişen hedeflere visible sınıfını ekleyin. Ardından CSS, bu hedefleri görünür alana animasyonla getirir.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Bir Kez Animasyon Oluşturma

Tek seferlik bir görünme efekti için sınıfı ekledikten sonra öğeyi izlemeyi bırakın; böylece öğe ekrandan çıkıp geri geldiğinde animasyon yeniden çalışmaz.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

İki Yönde Yeniden Animasyon

Öğeler görünür alandan çıktığında da animasyonla kaybolmalarını istiyorsanız, sınıfı isIntersecting değerine göre açıp kapatın ve izlemeye devam edin.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Gözlemi Başlatma

İzlemeyi başlatmak için her hedefi gözlemleyin. Kullanıcı her hedefin üzerinden kaydırdıkça observer tetiklenir.

items.forEach(el => observer.observe(el));

Animasyonları Kademelendirme

Artan bir geçiş gecikmesi uygulayarak basamaklı bir görünüm oluşturun. Bu değeri bir veri özniteliğinden veya öğenin sıra numarasından belirleyebilirsiniz.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Azaltılmış Hareket Tercihine Uyma

Bazı kullanıcılar daha az hareket tercih eder. Medya sorgusunu kontrol edin ve bu kullanıcılar için animasyonları atlayarak içeriği hemen gösterin.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Performans Kazanımları

Ağır iş CSS geçişleri tarafından yapıldığı ve görünürlük algılama tarayıcıya bırakıldığı için, çok sayıda öğe olsa bile kaydırma animasyonları akıcı kalır. Kaydırma olayı hesaplamaları yok, takılma yok.

Hızlı Kontrol

Kaydırmayla tetiklenen animasyonları ne kadar anladığınızı ölçün.

Özet

Kaydırmayla tetiklenen animasyonları oluşturdunuz:

Gizli ve görünür durumları CSS içinde tanımlayın.
Hedefleri uygun bir threshold ile gözlemleyin.
Kesişimde bir sınıfı açıp kapatın; animasyonu CSS yapar.
Tek seferlik görünümler için unobserve kullanın.
prefers-reduced-motion tercihine uyun.

IntersectionObserver konusunu tamamladınız. Sırada Web worker'ları var.

Sıkça Sorulan Sorular

“Kaydırmayla Tetiklenen Animasyonlar” dersi ücretsiz mi?

Evet — “Kaydırmayla Tetiklenen Animasyonlar” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Kaydırmayla Tetiklenen Animasyonlar” dersinde ne öğreneceğim?

Öğeleri görünüm alanına girdiklerinde canlandırın. JavaScript 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.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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 Tetiklenen Animasyonlar” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön