I’m making an attempt to make use of an observer script to point out / cover divs as others enter viewport. Under is the script I’m utilizing. It really works for the primary two objects, then fails when the third scrolls into view. Any thought why could be appreciated!
<script sort="textual content/javascript">
var observer = new IntersectionObserver(perform(entries)
if(entries[0].isIntersecting === true)
// on display screen
doc.getElementById('feel-1').classList.add('is-visible');
doc.getElementById('feel-1').classList.take away('is-hidden');
else
// not on display screen
doc.getElementById('feel-1').classList.add('is-hidden');
doc.getElementById('feel-1').classList.take away('is-visible');
if(entries[1].isIntersecting === true)
doc.getElementById('feel-2').classList.add('is-visible');
doc.getElementById('feel-2').classList.take away('is-hidden');
else
// not on display screen
doc.getElementById('feel-2').classList.add('is-hidden');
doc.getElementById('feel-2').classList.take away('is-visible');
if(entries[2].isIntersecting === true)
doc.getElementById('feel-3').classList.add('is-visible');
doc.getElementById('feel-3').classList.take away('is-hidden');
else
// not on display screen
doc.getElementById('feel-3').classList.add('is-hidden');
doc.getElementById('feel-3').classList.take away('is-visible');
threshold: [1]
);
observer.observe(doc.querySelector("#middle-1"));
observer.observe(doc.querySelector("#middle-2"));
observer.observe(doc.querySelector("#middle-3"));
</script>
Thanks for trying!