Intersection Observer

Blog

Intersection Observer Web Api'si yeni teknolojilerden biri

Intersection Observer

Yeni Teknolojiler; Intersection Observer

Günümüzde yeni web teknolojilerinin özellikle performansa yönelik olduğu söylenebilir. Bu olanaklar daha önce karmaşık şekilde ulaşabildiğimiz özelliklere daha kolay ve hatasız şekilde ulaşmamızı sağlıyor.

Intersection Observer Web Api’si yeni teknolojilerden biri

IO web sayfasındaki elementlerin görünürlüğünü kontrol eden ve bunu doğrudan DOM üzerinden gerçekleştiren bir özellik. Böylelikle eskiden JS ile oluşturduğumuz etkileri doğrudan browser üzerinden, hatasız bir şekilde kullanma olanağımız ortaya çıkıyor.

Intersection Observer web sitesindeki herhangi bir Html elementin sayfada görünür hale gelmesiyle tetikleniyor. Örneğin; sayfanın ilk açılışında görünmeyen, aşağısında yer alan bir “div” elementin, (sayfa aşağıya kaydırıldığında) ekranda görünür hale geldiğini tespit etmemizi sağlıyor.

Sayfadaki etkinin yumuşatılması ve kullanıcıya etkileşimin hissettirilmesine yönelik kullanabileceğimiz bir özellik.

Intersection Observer Kullanımı

Aşağıdaki örnekte “.cols-1” sınıflarının tamamı seçilmekte, ekranda görünür hale gelene “eklenensınıf” sınıfı eklenmekte, ekrandan çıkanda ise bu sınıf silinmektedir.

RootMargin ise sayfanın etki alanını belirlemektedir. Örneğin “Bottom -100px” verdiğinizde sayfanın altındaki 100px’lik alan IO’u tetiklememektedir.

Kolay ve temiz;

const secim01 = document.querySelectorAll('.cols-1');
const secim01opt = { rootMargin: '-100px 0px -100px 0px' };
observer = new IntersectionObserver((entries) => { entries.forEach(entry => {
if (entry.intersectionRatio > 0 ) { entry.target.classList.add('eklenensınıf'); } else { entry.target.classList.remove('eklenensınıf'); } }); });
secim01.forEach(secim01 => { observer.observe(secim01); },secim01opt);
Intersection Observer
Intersection Observer

Yazar; İthaki Ajans Oluşturulma; | Güncelleme; 02 Şub 2022