How to usethe Intersection Observer API in CSS
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.