Home
Omer fils ELENGA
use-scroll-effect

use-scroll-effect

This tailwind example is contributed by Omer fils ELENGA, on 04-Jan-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Hero Comment Section Animation

Author Omer fils ELENGA

168

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Animation Master</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">

body {
            font-family: 'Inter', sans-serif;
            background-color: #050505;
            color: #ffffff;
            overflow-x: hidden;
        }

/* --- 1. LOGIQUE DE BASE DES ANIMATIONS --- */
        .reveal-section {
            opacity: 0;
            transition: transform var(--anim-speed) var(--anim-curve), 
                        opacity var(--anim-speed) var(--anim-curve);
            will-change: transform, opacity;
        }

/* États initiaux selon la direction (Définis par data-direction) */
        .reveal-section[data-direction="top"] { transform: translateY(-60px); }
        .reveal-section[data-direction="bottom"] { transform: translateY(60px); }
        .reveal-section[data-direction="left"] { transform: translateX(-60px); }
        .reveal-section[data-direction="right"] { transform: translateX(60px); }

/* Quand la section est visible (ajouté par JS) */
        .reveal-section.is-visible {
            opacity: 1;
            transform: translate(0, 0);
        }

/* --- 2. ANIMATION DU CONTENU (Enfant) --- */
        .reveal-content {
            opacity: 0;
            transition: transform 0.6s var(--anim-curve), opacity 0.6s var(--anim-curve);
            transition-delay: 0.1s; /* Petit délai après le conteneur */
        }

.reveal-content[data-direction="top"] { transform: translateY(-40px); }
        .reveal-content[data-direction="bottom"] { transform: translateY(40px); }
        .reveal-content[data-direction="left"] { transform: translateX(-40px); }
        .reveal-content[data-direction="right"] { transform: translateX(40px); }

.reveal-section.is-visible .reveal-content {
            opacity: 1;
            transform: translate(0, 0);
        }

/* --- 3. EFFET FOCUS (HOVER) --- */
        /* Quand on est en mode focus (souris sur une section) */
        body.is-hovering .reveal-section:not(:hover) {
            opacity: 0.1; /* Les autres sections disparaissent presque */
            filter: blur(4px);
            transform: scale(0.95) !important; /* Rétrécissent */
            transition: all 0.5s var(--anim-curve);
        }

body.is-hovering .reveal-section:hover {
            transform: scale(1.02) !important; /* La section active grandit */
            z-index: 10;
            transition: all 0.5s var(--anim-curve);
        }

/* --- 4. PAGINATION (SIDE NAV) --- */
        #pagination-nav {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 50;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

.nav-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.nav-dot:hover {
            background-color: #fff;
        }

.nav-dot.active {
            background-color: #fff;
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

/* --- UTILITAIRES VISUELS --- */
        .glass-panel {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body>

<nav id="pagination-nav"></nav>

<section class="min-h-screen flex items-center justify-center px-6 reveal-section" data-direction="bottom" id="hero">  
        <div class="max-w-4xl text-center">
            <p class="text-indigo-500 font-bold tracking-widest mb-4 reveal-content" data-direction="bottom">INTRODUCTION</p>
            <h1 class="text-6xl md:text-9xl font-black tracking-tighter mb-6 reveal-content" data-direction="top">
                Design <br><span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">Intelligent.</span>
            </h1>
            <p class="text-gray-400 text-lg md:text-xl max-w-2xl mx-auto reveal-content" data-direction="bottom">
                Une expérience fluide, réactive et élégante. Scrollez vers le bas pour voir la magie opérer.
            </p>
        </div>
    </section>

<section class="min-h-screen flex items-center px-6 py-20 reveal-section" data-direction="left" id="features">
        <div class="max-w-6xl mx-auto w-full grid md:grid-cols-2 gap-16 items-center">
            
            
            <div class="reveal-content" data-direction="left">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Gestion intelligente</h2>
                <p class="text-gray-400 text-lg leading-relaxed mb-8">
                    Notre script détecte automatiquement la direction de votre entrée. Que vous veniez d'en haut ou d'en bas, l'animation s'adapte.
                </p>
                <button class="bg-white text-black px-8 py-4 rounded-full font-bold hover:scale-105 transition transform">
                    Découvrir le code
                </button>
            </div>

<div class="h-[400px] glass-panel rounded-3xl relative overflow-hidden reveal-content" data-direction="right">
                <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1000" class="w-full h-full object-cover opacity-80 hover:scale-110 transition duration-700">
            </div>

</div>
    </section>

<section class="min-h-screen flex items-center px-6 py-20 reveal-section" data-direction="right" id="about">
        <div class="max-w-6xl mx-auto w-full grid md:grid-cols-2 gap-16 items-center">
            
            
            <div class="h-[400px] glass-panel rounded-3xl relative overflow-hidden order-2 md:order-1 reveal-content" data-direction="left">
                <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1000" class="w-full h-full object-cover opacity-80 hover:scale-110 transition duration-700">
            </div>

<div class="order-1 md:order-2 reveal-content" data-direction="right">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Performance pure</h2>
                <p class="text-gray-400 text-lg leading-relaxed mb-8">
                    Utilisation de l'API `IntersectionObserver` native. Aucune librairie lourde, juste du JavaScript pur optimisé pour 60fps.
                </p>
                <div class="flex gap-4">
                    <div class="bg-gray-900 p-4 rounded-xl border border-gray-800">
                        <div class="text-2xl font-bold text-indigo-400">0ms</div>
                        <div class="text-xs text-gray-500 uppercase">Latence</div>
                    </div>
                    <div class="bg-gray-900 p-4 rounded-xl border border-gray-800">
                        <div class="text-2xl font-bold text-green-400">100%</div>
                        <div class="text-xs text-gray-500 uppercase">Compatibilité</div>
                    </div>
                </div>
            </div>

</div>
    </section>

<section class="min-h-[50vh] flex flex-col items-center justify-center px-6 py-20 reveal-section" data-direction="bottom" id="footer">
        <h2 class="text-5xl md:text-8xl font-black mb-8 reveal-content" data-direction="bottom">Start Now.</h2>
        <a href="#" class="text-xl underline text-gray-400 hover:text-white transition reveal-content" data-direction="top">omerlinkStream © 2026</a>
    </section>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            
            // --- CONFIGURATION ---
            const sections = document.querySelectorAll('.reveal-section');
            const navContainer = document.getElementById('pagination-nav');
            const body = document.body;
            const threshold = 0.3; // Déclenche l'anim quand 30% de la section est visible

// --- 1. GÉNÉRATION DE LA PAGINATION (GUIDE) ---
            sections.forEach((section, index) => {
                const dot = document.createElement('div');
                dot.classList.add('nav-dot');
                dot.title = section.querySelector('h1, h2')?.innerText || `Section ${index + 1}`;
                
                // Click sur la pagination -> Scroll doux vers la section
                dot.addEventListener('click', () => {
                    section.scrollIntoView({ behavior: 'smooth' });
                });
                
                navContainer.appendChild(dot);
            });

const navDots = Array.from(navContainer.children);

// --- 2. OBSERVER (SCROLL ANIMATION) ---
            const observerOptions = {
                root: null,
                threshold: threshold,
                rootMargin: "0px"
            };

const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    const section = entry.target;
                    const index = Array.from(sections).indexOf(section);

if (entry.isIntersecting) {
                        // Ajouter la classe pour déclencher l'animation CSS
                        section.classList.add('is-visible');
                        
                        // Activer la pagination correspondante
                        navDots.forEach(dot => dot.classList.remove('active'));
                        if (navDots[index]) navDots[index].classList.add('active');

} else {
                        // Optionnel : Retirer la classe quand on sort (pour rejouer l'anim en remontant)
                        // section.classList.remove('is-visible');
                    }
                });
            }, observerOptions);

sections.forEach(section => observer.observe(section));

// --- 3. EFFET FOCUS (HOVER SUR SECTION) ---
            // On ajoute l'écouteur sur le body pour détecter si on est en train de survoler une section
            sections.forEach(section => {
                section.addEventListener('mouseenter', () => {
                    body.classList.add('is-hovering');
                });

section.addEventListener('mouseleave', () => {
                    body.classList.remove('is-hovering');
                });
            });

});
    </script>
</body>
</html>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.7k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.5k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

1.9k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

11 months ago

1.9k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

10 months ago

1.8k
Creative Hero Section

Author:
Ijila Itunu

9 months ago

1.3k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

8 months ago

1.7k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

8 months ago

598
Modern page
hero page by salvator

Author:
Baraka Salvator

8 months ago

1.2k
chair
by salvator

Author:
Baraka Salvator

8 months ago

846
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

6 months ago

622
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

1 month ago

46

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components