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.6k

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

Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

2 years ago

4.2k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

2 years ago

3.4k
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.

Author:
Homayoun

11 months ago

831
Moving Background Animation

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

1 year ago

4.2k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

1 year ago

2.7k
Elevated Buton
On hover merge shadow

Author:
Anonymous

2 years ago

3.2k
Journey Through the Solar System 🚀
Embark on a stunning animated voyage across our solar system. Watch as your spaceship glides past the Sun, planets, and distant Pluto — all brought to life with simple, clean Tailwind CSS. A fun and educational journey through the cosmos!

Author:
Bonimater

1 year ago

1.2k
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

1 year ago

1.2k
card delivary
card

Author:
bonheur dev

1 year ago

1.6k
Growing Navigation Menu with Tailwind CSS
PREVIEW ON FULL SCREEN BECAUSE INSIDE THE NAV BAR IT CONTAINS (aria-current="page") which create some issues inside canvas. A clean and minimal vertical navigation menu built with Tailwind CSS featuring smooth line expansion, hover interactions, and active link highlighting. The component uses lightweight CSS transitions with aria-current support for accessible active states, making it ideal for documentation websites, portfolios, dashboards, and landing pages.

Author:
Arshid Iqbal

2 months ago

231
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

1 year ago

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

Author:
Bonimater

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components