Intersection Observer Lab

In this lab, you will be working with the Intersection Observer API to observe and manage the visibility of certain elements on your webpage. The observer will track the visibility of two boxes, box1 and box2, as they enter and leave the viewport on scrolling. You will make use of JavaScript to create an intersection observer, set thresholds, and apply different styles based on the intersection ratio.

You will learn about the following concepts in the process:

1. Creating and configuring intersection observer.
2. Handling intersection events and changing styles accordingly.
3. Setting thresholds and understanding intersection ratios.

At the end of this lab, you would have successfully created an intersection observer that manages the styles of the boxes as they enter and exit the viewport.