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 v3.4. It is responsive. similar terms for this example is Transitions

Animation

Author Michael Andreuzza

Tailwind v3.4 3.7k 6

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

Responsive Projects Section

ariaw

1 year ago

1.4k
Animated Profile Card
Animated profile card with profile completion circle

Shivam Vishwakarma

1 year ago

2.3k
Gaming UI Card, Form
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.

Ayyamperumal S

9 months ago

711
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

8 months ago

749
Plasma
plasma

Raul antonio de la cruz hernandez

1 year ago

1.3k
gradient bg
coolness

Mango_ 5953

1 year ago

692
chair
by salvator

Baraka Salvator

1 year ago

1.5k
Animated Coming Soon Page 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.2k
REGISTER - CTA - SECTION animation

ABDO-SY

1 year ago

1.2k
3d car delivary
3d car delivary

Bonimater

1 year ago

1.7k
Responsive 3D Car Delivery Animation Tutorial
Responsive 3D Car Delivery Animation Tutorial

Bonimater

1 year ago

1.1k
Elevated Buton
On hover merge shadow

Anonymous

2 years ago

3.2k