A Beginner's Guide to JavaScript's The Intersection Observer API

A Beginner's Guide to JavaScript's The Intersection Observer API

TUTORIAL!!! A Beginner's Guide to JavaScript's The Intersection Observer API

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Winning on the Web with Cascading Style Sheets (CSS) Animations

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.

How To Create CSS Neon Animation

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.

The Guide To CSS Animation

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

HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Website header text made out entirely of interactive bubble particles? Why not :) In today's HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Let's improve our understanding of these 3 fundamental web development technologies and create something cool in the process. HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Pure CSS Wavy Section Animation Effects | Html5 CSS3 Effects

Pure CSS Wavy Section Animation Effects | Html5 CSS3 Effects