How to usethe Intersection Observer API in CSS

Step for Creating React Application and Installing Module:

The Intersection Observer API is used to implement the reveal on scroll effect in React using Tailwind CSS. It allows you to asynchronously observe changes in the intersection of a target element with its container or the viewport.

Example: This example creates RevealOnScroll components using the tailwind classes and scroll observer.

Javascript

// Filename - App.js
 
import React, { useEffect, useRef, useState } from "react";
 
const RevealOnScroll = ({ children }) => {
    const [isVisible, setIsVisible] = useState(false);
    const ref = useRef(null);
 
    useEffect(() => {
        const scrollObserver = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setIsVisible(true);
                scrollObserver.unobserve(entry.target);
            }
        });
 
        scrollObserver.observe(ref.current);
 
        return () => {
            if (ref.current) {
                scrollObserver.unobserve(ref.current);
            }
        };
    }, []);
 
    const classes = `transition-opacity duration-1000 
        ${isVisible ? "opacity-100" : "opacity-0"
        }`;
 
    return (
        <div ref={ref} className={classes}>
            {children}
        </div>
    );
};
 
const App = () => {
    return (
        <div className="container mx-auto text-center">
            <h1 className="text-7xl font-bold mb-8 text-green">
                w3wiki
            </h1>
            <h2 className="text-4xl ">
                Reveal on Scroll in React using Tailwind CSS
            </h2>
            <RevealOnScroll>
                <p className="text-3xl h-[15em] mt-[10em]">
                    Welcome to the computer science portal!
                </p>
            </RevealOnScroll>
            <RevealOnScroll>
                <p className="text-3xl h-[15em] mt-[10em]">
                    Learn Web Development
                </p>
            </RevealOnScroll>
            <RevealOnScroll>
                <p className="text-3xl h-[15em] mt-[10em]">
                    Learn Android Development
                </p>
            </RevealOnScroll>
            <RevealOnScroll>
                <p className="text-3xl h-[15em] mt-[10em]">
                    Learn Data Stuctures and Algorithms
                </p>
            </RevealOnScroll>
            <RevealOnScroll>
                <p className="text-3xl h-[15em] mt-[10em]">
                    and more...
                </p>
            </RevealOnScroll>
            {/* Add more RevealOnScroll components 
            for other elements */}
        </div>
    );
};
 
export default App;

Steps to Run the Application: Use this command in the terminal in the project directory.

npm start

Output: This output will be visible on the http://localhost:3000 on the browser window

How to Implement Reveal on Scroll in React using Tailwind CSS ?

In React, the reveal on the scroll is a technique, where elements on a page gradually appear or animate as the user scrolls down.

Tags:

#React-Questions #Tailwind CSS-Questions #ReactJS #Web Technologies

Step for Creating React Application and Installing Module:

Approach 2: Using Scroll Event Listener

How to usethe Intersection Observer API in CSS

Javascript

How to Implement Reveal on Scroll in React using Tailwind CSS ?

Similar Reads

Contact Us