JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="parallax-container">
        <img src="https://umb-16i-2678-uat.16i-dev.com/media/uo3iwabe/16i_placeholder_image_landscape_01.jpg?width=2000&height=1125">
    </div>

    <div class="content">
        <h2>Content Below</h2>
        <p>Scroll to see the parallax effect in action.</p>
    </div>

CSS

body {
            margin: 0;
            font-family: sans-serif;
        }

        /* Parallax Container */
        .parallax-container {
            position: relative;
            width: 100%;
            height: 60vh; /* Adjust height */
            overflow: hidden;
        }

        /* Sticky Image with Parallax Effect */
        .parallax-container img {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) scale(1.2);
            width: 110%; /* Slightly larger for smooth movement */
            height: auto;
            object-fit: cover;
            will-change: transform;
        }

        /* Spacer to enable scrolling */
        .content {
            height: 150vh;
            background: #f8f8f8;
            padding: 50px;
            font-size: 18px;
        }