Published
Edited
Mar 29, 2021
2 stars
{
const root = example1.querySelector('.frame');
const rootMargin = rootMarginExample1;
const sectionEls = [...root.querySelectorAll('.section')];
function observerCallback(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
root.classList.add('in-section');
} else {
root.classList.remove('in-section');
}
});
}
const options = {
root,
rootMargin,
};
const observer = new IntersectionObserver(observerCallback, options);
sectionEls.forEach(el => observer.observe(el));
}
observables = [...example2.querySelectorAll('.section')]
.map(el => ({ el, visible: false }));
{
const root = example2.querySelector('.frame');
const rootMargin = rootMarginExample2;
function observerCallback(entries, observer) {
entries.forEach(entry => {
const obj = observables.find(obj => obj.el.isSameNode(entry.target));
obj.visible = entry.isIntersecting;
});
toggleBgClass(root);
}
const options = {
root,
rootMargin,
};
const observer = new IntersectionObserver(observerCallback, options);
observables.forEach(obj => observer.observe(obj.el));
}
toggleBgClass = (root) => {
const inView = observables.find(obj => obj.visible);
if (inView) {
root.classList.add('in-section');
} else {
root.classList.remove('in-section');
}
}
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.
