Home
Michael Andreuzza
change background color on scroll with Tailwind CSS and Alpinejs

change background color on scroll with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Animation

Author Michael Andreuzza

3.2k

Fork Fullscreen

<header x-data="{ scroll: false }" @scroll.window="scroll = (window.pageYOffset > 50) ? true : false" :class="{ 'bg-white': scroll, 'bg-transparent': !scroll }" class="w-full fixed top-0 p-20 text-4xl 2xl:text-8xl flex flex-col justify-center items-center transition-colors duration-500 ease-in-out">
 <div class="text-base text-gray-500  mx-auto">
  <div>
   <h1>Background change on scroll</h1>
   <p class="text-balance">
    Scroll down to see the background color change while scroll.
   </p>
  </div>
 </div>
</header>

<section x-data="{ scroll: false }" @scroll.window="scroll = (window.pageYOffset > 50) ? true : false" :class="{ 'bg-[#fffee5]': scroll, 'bg-white': !scroll }" class="h-svh text-4xl 2xl:text-8xl p-20 pt-80 flex flex-col justify-center items-center transition-colors duration-500 ease-in-out">
 <h2>Section #01</h2>
</section>
<section x-data="{ scroll: false }" @scroll.window="scroll = (window.pageYOffset > 150) ? true : false" :class="{ 'bg-[#e1f1fd]': scroll, 'bg-white': !scroll }" class="h-svh text-4xl 2xl:text-8xl p-20 flex flex-col justify-center items-center transition-colors duration-500 ease-in-out">
 <h2>Section #02</h2>
</section>
<section x-data="{ scroll: false }" @scroll.window="scroll = (window.pageYOffset > 250) ? true : false" :class="{ 'bg-[#fceeda]': scroll, 'bg-white': !scroll }" class="h-svh text-4xl 2xl:text-8xl p-20 flex flex-col justify-center items-center transition-colors duration-500 ease-in-out">
 <h2>Section #03</h2>
</section>

<div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
 <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
  <div class="flex w-0 flex-1 items-center p-4">
   <div class="w-full">
    <p class="text-sm font-medium text-neutral-900">Tutorial</p>
    <p class="mt-1 text-sm text-neutral-500">
     How to change background color on scroll with Tailwind CSS and
     Alpinejs
    </p>
    <p class="mt-2 text-xs text-orange-500 underline">
     <a href="https://lexingtonthemes.com"> by © Lexington Themes</a>
    </p>
   </div>
  </div>
  <div class="flex">
   <div class="flex flex-col divide-y divide-neutral-200">
    <div class="flex h-0 flex-1">
     <a href="https://lexingtonthemes.com/tutorials/how-to-change-background-coloron-scroll-with-tailwind-css-and-alpinejs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a>
    </div>
    <div class="flex h-0 flex-1">
     <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/change-on-scroll/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a>
    </div>
   </div>
  </div>
 </div>
</div>

Related Examples

Animated Coming Soon 4

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

11 months ago

1.7k
chair
by salvator

Author:
Baraka Salvator

7 months ago

815
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

7 months ago

880
Modern page
hero page by salvator

Author:
Baraka Salvator

7 months ago

1k
Marquee animation with tailwind css

Author:
Anonymous

1 year ago

8.3k
background animation
background animation

Author:
Jayendra Madara

1 year ago

3.1k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

7 months ago

894
car delivary
car delivary

Author:
Bonimater

6 months ago

588
3d car delivary
3d car delivary

Author:
Bonimater

6 months ago

898
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

2 months ago

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

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

1 year ago

5.4k
3D Box

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

1 year ago

5.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components