Published
Edited
Mar 29, 2021
Importers
10 stars
setupObserver = (root, rootMargin) => {
const elements = [...root.querySelectorAll('.caption')];
const background = root.querySelector('.background > p');
function observerCallback(entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
if (entry.isIntersecting) {
entry.target.classList.add('active');
background.innerHTML = entry.target.getAttribute('data-index');
} else {
entry.target.classList.remove('active');
}
})
}
const options = {
root,
rootMargin,
};
const observer = new IntersectionObserver(observerCallback, options);
elements.forEach(el => observer.observe(el));
}
setupObserver(example1.querySelector('.frame'), rootMarginExample1)
setupObserver(example2.querySelector('.frame'), rootMarginExample2)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
