Home
Omer fils ELENGA
omerlinkStream

omerlinkStream

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

Card Carousel Hero Comment Section Navbar Range Slider

Author Omer fils ELENGA

180

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OmerlinkStream</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        /* --- STYLE GLOBAL --- */
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #000; /* Fond noir pour le cinema */
            color: #fff;
            overflow: hidden; /* Empêcher le scroll body natif pour faire notre propre scroll */
        }

/* --- SCROLL SNAP (Effet Application) --- */
        #app-container {
            height: 100vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
            position: relative;
            z-index: 10;
        }

/* Masquer la barre de défilement native */
        #app-container::-webkit-scrollbar {
            display: none;
        }
        #app-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

.stream-section {
            height: 100vh;
            width: 100vw;
            scroll-snap-align: start;
            position: relative;
            overflow: hidden;
        }

/* --- VISUALISEUR AUDIO (Petites barres qui bougent) --- */
        .bar {
            width: 3px;
            background: white;
            animation: equalize 1s infinite;
        }
        @keyframes equalize {
            0% { height: 10px; }
            50% { height: 25px; }
            100% { height: 10px; }
        }
        .bar:nth-child(2) { animation-delay: 0.1s; }
        .bar:nth-child(3) { animation-delay: 0.2s; }
        .bar:nth-child(4) { animation-delay: 0.3s; }
        
        .paused .bar {
            animation-play-state: paused;
            height: 10px;
        }

/* --- INTERFACE UTILISATEUR --- */
        .glass-nav {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

.progress-line {
            transition: width 0.1s linear;
        }

/* Transition opacity pour changement de contenu */
        .fade-enter {
            animation: fadeIn 0.6s ease-out forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(1.05); }
            to { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>

<nav class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="navbar">
        <div class="max-w-[1500px] mx-auto flex justify-between items-center py-4 px-6">
            
            <div class="flex items-center gap-2 cursor-pointer group">
                <div class="w-8 h-8 bg-white text-black font-bold flex items-center justify-center rounded group-hover:bg-gray-200 transition">O</div>
                <div class="text-xl font-bold tracking-tight">omerlink<span class="text-gray-400">Stream</span></div>
            </div>

<div class="hidden md:flex gap-8 text-sm font-medium text-gray-300">
                <a href="#" class="text-white">Stream</a>
                <a href="#" class="hover:text-white transition">Live</a>
                <a href="#" class="hover:text-white transition">Podcast</a>
                <a href="#" class="hover:text-white transition">Library</a>
            </div>

<div class="flex items-center gap-4">
                <button class="hidden md:block px-4 py-2 text-xs font-semibold text-white border border-gray-600 rounded-full hover:bg-white hover:text-black transition">Log In</button>
                <button class="bg-white text-black px-4 py-2 rounded-full text-xs font-bold hover:scale-105 transition">Go Pro</button>
            </div>
        </div>
    </nav>

<main id="app-container">
        
        
        <section class="stream-section" data-id="1">
            
            <img src="https://images.unsplash.com/photo-1493225255756-d9584f8606e9?q=80&w=2500&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
            
            
            <div class="absolute inset-0 flex flex-col justify-end pb-24 px-6 md:px-20 max-w-5xl mx-auto w-full">
                <div class="fade-enter">
                    <h2 class="text-pink-500 font-bold tracking-widest uppercase text-xs mb-2">Featured</h2>
                    <h1 class="text-5xl md:text-8xl font-black mb-4 leading-none tracking-tighter uppercase">Music <br> Festival</h1>
                    <p class="text-gray-300 max-w-lg text-sm md:text-base mb-6 line-clamp-2">
                        Discover the best electro and pop hits from this summer's festival lineup. Immerse yourself in the sound.
                    </p>
                    <div class="flex items-center gap-4">
                        <button class="flex items-center gap-2 bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 transition" onclick="togglePlay(this)">
                            <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> Watch Now
                        </button>
                        <button class="w-12 h-12 rounded-full border border-white/50 flex items-center justify-center hover:bg-white/20 transition">
                            <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        </section>

<section class="stream-section" data-id="2">
            <img src="https://images.unsplash.com/photo-1478720568477-152d9b164e63?q=80&w=2500&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
            <div class="absolute inset-0 flex flex-col justify-end pb-24 px-6 md:px-20 max-w-5xl mx-auto w-full">
                <div class="fade-enter">
                    <h2 class="text-blue-400 font-bold tracking-widest uppercase text-xs mb-2">Tech</h2>
                    <h1 class="text-5xl md:text-8xl font-black mb-4 leading-none tracking-tighter uppercase">Future <br> Reality</h1>
                    <p class="text-gray-300 max-w-lg text-sm md:text-base mb-6">
                        Exploring the boundaries of VR and AR. How the metaverse will reshape our daily lives.
                    </p>
                </div>
            </div>
        </section>

<section class="stream-section" data-id="3">
            <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=2500&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
            <div class="absolute inset-0 flex flex-col justify-end pb-24 px-6 md:px-20 max-w-5xl mx-auto w-full">
                <div class="fade-enter">
                    <h2 class="text-green-500 font-bold tracking-widest uppercase text-xs mb-2">Travel</h2>
                    <h1 class="text-5xl md:text-8xl font-black mb-4 leading-none tracking-tighter uppercase">Mountain <br> Life</h1>
                    <p class="text-gray-300 max-w-lg text-sm md:text-base mb-6">
                        The highest peaks, the deepest silence. Join us on a journey to the roof of the world.
                    </p>
                </div>
            </div>
        </section>

</main>

<footer id="player-bar" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 w-[90%] md:w-[600px] bg-white/10 backdrop-blur-xl border border-white/20 rounded-full px-6 py-3 flex items-center justify-between z-50 transition-transform duration-300 translate-y-32 opacity-0">
        
        
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gray-800 rounded overflow-hidden">
                <img src="https://via.placeholder.com/100" id="player-img" class="w-full h-full object-cover opacity-80">
            </div>
            <div class="flex flex-col">
                <span id="player-title" class="text-sm font-bold text-white leading-tight">Loading...</span>
                <span id="player-author" class="text-xs text-gray-400">Artist</span>
            </div>
        </div>

<div class="flex items-center gap-6">
            <button class="text-white hover:text-gray-300"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></button>
            
            <button id="global-play-btn" class="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center hover:scale-110 transition">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
            
            <button class="text-white hover:text-gray-300"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></button>
        </div>

<div class="flex items-center gap-1 h-5" id="visualizer">
            <div class="bar h-3"></div>
            <div class="bar h-4"></div>
            <div class="bar h-2"></div>
            <div class="bar h-5"></div>
        </div>
    </footer>

<div class="fixed right-6 top-1/2 transform -translate-y-1/2 flex flex-col gap-2 z-40">
        <div class="w-1 h-16 bg-gray-600 rounded-full overflow-hidden relative">
            <div id="scroll-progress" class="absolute top-0 left-0 w-full bg-white transition-all duration-300" style="height: 0%"></div>
        </div>
    </div>

<div class="fixed right-10 bottom-32 z-40 hidden md:flex flex-col gap-4">
        <button onclick="scrollToSection('prev')" class="w-12 h-12 bg-white/10 backdrop-blur rounded-full flex items-center justify-center hover:bg-white text-white hover:text-black transition">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
        </button>
        <button onclick="scrollToSection('next')" class="w-12 h-12 bg-white/10 backdrop-blur rounded-full flex items-center justify-center hover:bg-white text-white hover:text-black transition">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </button>
    </div>

let currentSectionIndex = 0;
        let isPlaying = false;
        const app = document.getElementById('app-container');
        const sections = document.querySelectorAll('.stream-section');
        const playerBar = document.getElementById('player-bar');
        const scrollProgress = document.getElementById('scroll-progress');
        const navbar = document.getElementById('navbar');

// --- OBSERVER (Détecte quelle section est visible) ---
        const observerOptions = {
            root: app,
            threshold: 0.6 // 60% visible = actif
        };

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

// --- LOGIQUE DE LECTEUR ---
        function activeStream(index) {
            currentSectionIndex = index;
            
            // Mise à jour de la barre de scroll droite
            const progress = ((index + 1) / sections.length) * 100;
            scrollProgress.style.height = `${progress}%`;

// Mise à jour des données du player
            const data = streamData[index] || streamData[0];
            document.getElementById('player-title').innerText = data.title;
            document.getElementById('player-author').innerText = data.author;
            document.getElementById('player-img').src = data.img;

// Afficher le player
            playerBar.classList.remove('translate-y-32', 'opacity-0');

// Si on était déjà en lecture, on continue (simulé)
            if (isPlaying) {
                startPlayerAnim();
            }
        }

// --- CONTROLES ---
        function togglePlay(btn) {
            isPlaying = !isPlaying;
            updatePlayBtn();
            if (isPlaying) {
                startPlayerAnim();
                // Zoom léger sur le background image
                const img = sections[currentSectionIndex].querySelector('img');
                img.style.transform = "scale(1.1)";
                img.style.transition = "transform 10s ease";
            } else {
                stopPlayerAnim();
                const img = sections[currentSectionIndex].querySelector('img');
                img.style.transform = "scale(1)";
            }
        }

document.getElementById('global-play-btn').addEventListener('click', function() {
            togglePlay(this);
        });

function startPlayerAnim() {
            // Ici tu connecterais ta vraie logique audio
            // Pour l'instant, on active juste l'animation CSS
        }

function stopPlayerAnim() {
            // Stop audio
        }

function scrollToSection(direction) {
            const newIndex = direction === 'next' ? currentSectionIndex + 1 : currentSectionIndex - 1;
            
            if (newIndex >= 0 && newIndex < sections.length) {
                sections[newIndex].scrollIntoView({ behavior: 'smooth' });
            }
        }

// --- NAVBAR VISIBILITY ON SCROLL ---
        app.addEventListener('scroll', () => {
            if (app.scrollTop > 100) {
                navbar.classList.add('-translate-y-full');
            } else {
                navbar.classList.remove('-translate-y-full');
            }
        });

// --- INITIALISATION ---
        // Démarrer sur le premier stream
        window.onload = () => {
             activeStream(0);
        }

</script>
</body>
</html>

Related Examples

Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.7k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

5.2k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

13k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.7k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14.6k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3k
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
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.9k
responsive slider carousel
slider carousel

Author:
Abhiraj

1 year ago

2.2k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

11 months ago

1.8k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

10 months ago

2.3k
Food App Web design

Author:
Aitrik Saha

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components