The Intersection Observer API is simply a new way to observe (monitor) the position and visibility of an element in the DOM relative to another root element and to run a callback function if these elements intersect (meet).
Now you might wonder, What exactly is a root element? Well, a root element is simply an element that is a parent or container element to other elements. Meaning, If we created a
div in an HTML document and inside this
div we placed a
p text, the
div becomes the direct root element (parent) of the
p text as it is what contains the paragraph.
<body> <div> <p>Lorem, ipsum.</p> </div> </body>
Based on this logic, we can safely say the
bodyis also the immediate parent to this
divand also a grandparent to the
ptext. But you know what else is the ancestral root element of everything in the DOM? The browser viewing the HTML document becomes a container (root) to whatever area of the webpage that is visible to the browser's viewport (screen) at any time.
So in essence, the Intersection Observer API can be used to observe an element to see if that element intersects (meets or passes across) its root element in the DOM or if it simply enters or leaves the browser's viewport. And for the observer to trigger a callback function when this event takes place.
*Note: *A callback function is simply a normal function that is provided to another function as that function's argument (the actual value for its parameter).
Below is an image I've prepared that illustrates an actual Intersection in action, It should give you an idea of how it works, but if it's still unclear, don't sweat it... I'll explain everything in a minute.
Now that we know what an Intersection Observer is, let’s dive into its implementation. We’ll start by creating a simple HTML page with 3 sections, the first and third section is of little interest to us as we will mostly be working with the second section, we simply want more room to be able to scroll down the page.
<body> <section class="section-1"> <h2>Section 1</h2> </section> <section class="section-2"> <img class="img" src="background.jpg" alt="" /> </section> <section class="section-3"> <h2>Section 3</h2> </section> </body>
Now for the CSS, we'll give each section a
100vh, center the contents of each section using
flex, then give the image a fixed responsive width and make each section obvious by applying a background colour to separate them. Lastly, we will create a
Winning on the Web with Cascading Style Sheets (CSS) Animations. Web Animation can be used to attract attention, engage people better, and communicate more clearly and effectively.
Guys! Thank you all 🥳, I've hit a 100 subscribers to my Newsletter and I'm over the moon! Therefore I wanted to make a cool 100 subs CSS neon animation to celebrate.
Animations are very useful tools to make pages more appealing. I would like to start with what are animations, give some supplementary information, and give some animation syntax examples. The Guide To CSS Animation
Pure CSS Wavy Section Animation Effects | Html5 CSS3 Effects