I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css.
My first step worked: With code injection I can add a class .preFade to my block:
window.onload = function myFunction() {
var element = document.getElementById("block-85f05db57d57001f69ee");
element.classList.add("preFade");
}
My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible:
const appear = document.querySelector('.preFade');
const cb = function(entries){
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('fadeIn');
}else{
entry.target.classList.remove('fadeIn');
}
});
}
const io = new IntersectionObserver(cb);
io.observe(appear);
My JS skills are pretty poor, so any help is greatly appreciated.