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

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

Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

4 months ago

797
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

8 months ago

1.1k
Animated Coming Soon 4

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

1 year ago

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

Author:
Chitranshu

1 year ago

2.6k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

5.3k
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

10 months ago

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

Author:
Bonimater

8 months ago

615
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

1 year ago

1.4k
Elevated Buton
On hover merge shadow

Author:
Anonymous

1 year ago

2.4k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

5.2k
Card animate

Author:
Raul antonio de la cruz hernandez

1 year ago

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

Author:
shrenik khule

2 weeks ago

32

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components