// 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