script.js
style.css
index.html
setup.css
let highlightClass = 'highlight'; // Set up variables. let highlightBlock = document.querySelector('section:nth-child(4)'); // Set up an IntersectionObserver. let sectionObserver = new IntersectionObserver((entries) => { let [entry] = entries; // Don’t worry about this, for now. // When it is intersecting, apply the class; otherwise, remove it. if (entry.isIntersecting) { highlightBlock.classList.add(highlightClass); } else { highlightBlock.classList.remove(highlightClass); } }); sectionObserver.observe(highlightBlock); // Watch for it!
section { /* Initial state, without the class. */ background-color: gold; padding: calc(var(--base) / 2); transition: all 1s ease-in-out; /* Transition everything. */ will-change: transform; /* Improves the aliasing! */ } section.highlight { /* When the class is applied with JS! */ background-color: aquamarine; transform: rotate(5deg); }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/assets/styles/reset.css" rel="stylesheet"> <link href="setup.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <script defer src="script.js"></script> </head> <body> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> <section> <p>I’ve just added some text here to have another element, and also added some CSS to style it a bit—nothing too fancy.</p> </section> </body> </html>
body { --base: 20px; align-items: center; display: flex; flex-direction: column; font-family: sans-serif; padding: var(--base); row-gap: var(--base); }