add onscreen function
This commit is contained in:
parent
128fb05e90
commit
8a4503c925
|
@ -1,5 +1,22 @@
|
|||
(function() {
|
||||
window.addEventListener("DOMContentLoaded", event => {
|
||||
// TODO
|
||||
});
|
||||
window.addEventListener('DOMContentLoaded', event => {
|
||||
function onScreenHandler(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.intersectionRatio > 0) {
|
||||
entry.target.classList.add('is-showing', 'has-shown');
|
||||
} else {
|
||||
entry.target.classList.remove('is-showing');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.js-onscreen').forEach(el => {
|
||||
const options = {
|
||||
rootMargin: '0px',
|
||||
threshold: [0, 1],
|
||||
};
|
||||
const observer = new IntersectionObserver(onScreenHandler, options);
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Reference in New Issue