Javascript Intersection Observer Kullanımı

Merhabalar bu yazımızda javascript intersection observer API kullanımından bahsedeceğim. Javascript intersection observer nedir ve projelerimizde ne şekilde kullanabiliriz gibi soruları cevaplandırmaya çalışacağım.

Javascript Intersenction Observer API

Intersection Observer API, bir hedef öğenin bir üst öğeyle veya bir üst düzey belgenin görünüm penceresiyle kesişimindeki değişiklikleri gözlemlememizi sağlar. Hedeflediğimiz öğenin sayfada görünürlük durumunu izleyip, buna göre işlem yapmamıza olanak tanır. Örnek vermek gerekirse, hedeflediğimiz öğe sayfada görünür olmaya başladığında o öğeye bir animasyon ekleyebiliriz. Sınıfında bir değişiklik yapabiliriz. CSS ile müdahale edebiliriz, ya da bir videoyu oynatmaya başlatıp, görünürlükten çıktıktan sonra durdurabiliriz. Öncelikle intersection observer nasıl kullanılır onu göstereceğim ve daha sonrasında bir örnek ile kullanımını göstereceğim.

Genel kullanımımız için örnek kod bloğu aşağıdaki gibidir.

const target = document.getElementById('element');
const options = {
    root: document.querySelector('#scrollArea'), //Hedefin görünürlüğünü kontrol ederken kullanacağımız scroll olan objemiz, yok ise varsayılan olarak en üst nesnesi kullanır.
    rootMargin: '0px', // Hedefin görünürlüğünün mesafesini ayarlamak için kullanılır. 
    threshold: 0.8 // Hedefin görünürlüğünün yüzdesini ayarlar. Sadece float değer alır.
};
const observer = new IntersectionObserver(callback, options); // instance'ı oluşturuyoruz ve daha sonra bir hedef belirleyip observe() ile izlemeye başlayabiliriz.
observer.observe(target); // neyi izlemesi gerektiğini içine yazarak izlemeyi başlatıyoruz.
Konuyu daha iyi kavrayabilmemiz için örnek üzerinden kullanıma bakalım. Bu örnekte amacımız sayfada bulunan videoyu görünür olduğu zaman otomatik oynatacağız, görünmediği anlarda ise durdurma işlemini yapacağız. Bu sayede sayfamızda gezinen bir ziyaretçimiz videonun hiç bir anını kaçırmamış olacak.
const video = document.getElementById('video'); // video id'li videomuzu tanımlıyoruz.
const callback = (entries) => {
    if (entries[0].isIntersecting) { // eğer görünür olursa
        video.play();  // videoyu oynat
    }else {           // görünür olmazsa
        video.pause();  // videoyu durdur
    }
};
const options = {
    root:null, // en üst elemanı alacak
    rootMargin:'0px',
    threshold:0.9 // video %90 kadar görünür olduğunda bu işlemi yap
};
const observer = new IntersectionObserver(callback,options);
observer.observe(video);

Yukarıdaki işlemde videomuz %90 oranında görünür olduğunda oynatılmaya başlanacak ve görünürlüğü %90’ın altına düştüğünde durdurulacak. Javascript intersection observer kullanarak projelerinizde bir çok şey yapabilirsiniz. Örnekleri çoğaltmak istersek, resimleri görünür olmaya başladığı anda yükleyip sayfa yüklenme hızını arttırabilirsiniz. Bu konuda Tayfun Erbilen hocanın youtube videosu da çok faydalı olacaktır. İzlemenizi tavsiye ederim.

Bu ve benzeri önemli ipuçlarını öğrenmek için diğer yazılarıma da göz atabilirsiniz.

Web sitesine mi ihtiyacınız var ?

 

Kategori:

HTMLJavascript

Etiketler:

, , ,