// intersection observer using a function
const ObserverTemplate = () => {
const options = {
rootMargin: '0px 0px -200px 0px',
threshold: 0.5
}
const textObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if(entry.isIntersecting){
entry.target.classList.add('show')
}else{
entry.target.classList.remove('show')
}
})
}, options)
const h1Tag = getElement('h1')
// console.log(h1Tag)
textObserver.observe(h1Tag)
}
window.addEventListener('DOMContentLoaded', ObserverTemplate)
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter