function observeIntersection(el, offset) {
const domEl = document.querySelector(el),
options = {
rootMargin: '0px',
threshold: 0
},
observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('on');
domEl.classList.remove('offset');
} else {
console.log('off');
}
});
}, options);
domEl.classList.add('offset', 'offset-transition'),
styleHolder = document.createElement('style');
styleHolder.innerHTML = `
.offset {
transform: translateY(${offset}px);
}
.offset-transition {
transition: 1.5s ease;
}
`
domEl.appendChild(styleHolder);
observer.observe(domEl);
}
observeIntersection('.element-to-observe', 100);
Not so elegant, with inline style, but standalone script!
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.