Have you ever visited a website where as you scroll down the page, the contents of the webpage gradually begin to reveal themselves as you approach them? You got to admit, it’s a pretty sleek feature. Have you ever wondered how you could implement this feature in your projects without using third-party libraries or plugins? Well, JavaScript has a native Intersection Observer API that lets you do just that… and much, much more. In this article, we will discuss how this Intersection Observer API works and how we can use it to detect the visibility of an element by building a simple web page that implements this “reveal contents on scroll” feature.
Prerequisites
- Basic knowledge of JavaScript (beginner level is acceptable as I’ll explain everything in great details like I was explaining to a 5-year-old. :)
- Basic knowledge of HTML and CSS (you’ve built at least one basic webpage with them).
- A code editor (VS Code recommended).
- And a browser of course (Chrome or Firefox recommended).
What is the Intersection Observer?
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 thisdivand also a grandparent to theptext. 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.
Creating a Basic HTML/CSS Page
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
heightof100vh, center the contents of each section usingflex, 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 ahiddenclass that will be responsible for hiding and revealing our content later on using JavaScript.
#javascript #html5 #css3 #css-animation #intersection-observer #css #programming
