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

gradient bg
coolness

Mango_ 5953

1 year ago

692
HOT DOGS WEB SITE
it combine the hot dogs delivary

bonheur dev

1 year ago

1.3k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

farid

1 year ago

844
Interactive Multi-Layer Orbit Animation with Tailwind CSS
A responsive multi-layer orbit animation built with Tailwind CSS featuring rotating circular paths, floating icons, and a centered logo. Perfect for modern landing pages and portfolio hero sections.

Arshid Iqbal

3 months ago

93
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

13k
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Homayoun

1 year ago

929
Loading dots
Black Loading dots

Никита (Whiso)

1 year ago

2.8k
Botton hover
On hover Changes text

davilaarroyo07

2 years ago

7.6k
Plasma
plasma

Raul antonio de la cruz hernandez

1 year ago

1.3k
car delivary
it is used especially in e-commerce when you you are going to deliver

Bonimater

1 year ago

1.5k
use-scroll-effect
use-scroll-effect

Omer fils ELENGA

9 months ago

995
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

Bonimater

1 year ago

1.7k