Intersection Observer
Intersection Observer Web Api'si yeni teknolojilerden biri
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);
Oluşturulma; | Güncelleme; 02 Şub 2022