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);
Ayrıntılar	
İthaki Ajans tarafından yazıldı.	
Kategori: Blog	
20 Mart 2020 tarihinde yayınlandı.	
Son Güncelleme: 20 Mart 2020	
Google Algoritma Güncellemesi	
Google AMP Nedir?
Web Site Fiyatları
Web sitesi yaptırırken en önemli adım beklentilerinize uygun kodlamaya karar vermektir. Temelde...
Web Site Örnekleri
Aşağıda web site tasarım ve/veya uygulama çalışma örneklerimizi bulabilirsiniz. Uygulaması yapılan web...