Parallax Lift Scroll Tile

A parallax lift scroll tile built with pure HTML and CSS that simulates depth by moving foreground tiles upward at a different rate than the background as the page scrolls, creating a subtle layered motion effect without relying on JavaScript or external libraries.

Usage

This component is well suited for interfaces where visual depth enhances storytelling, such as hero sections, feature highlights, portfolio showcases, or landing pages that benefit from a sense of motion and spatial separation between elements.

Implementation

The parallax lift effect is achieved using CSS translate transforms, perspective settings, and scroll linked state styling, allowing tiles to rise at varying speeds while keeping the layout lightweight and visually smooth.

HTML

<section class="scroll-lift">
  <span>Parallax content</span>
</section>

<section class="scroll-lift">
  <span>Parallax content</span>
</section>

CSS

.scroll-lift {
  width: 200px;
  padding: 1rem;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  transform: translateY(20px) scale(0.96);
  animation: liftIn 700ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes liftIn {
  to {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-color-scheme: dark) {
  .scroll-lift {
    background: #020617;
    color: #e5e7eb;
  }
}

.scroll-lift {
  width: 200px;
  padding: 1rem;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  transform: translateY(20px) scale(0.96);
  animation: liftIn 700ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes liftIn {
  to {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-color-scheme: dark) {
  .scroll-lift {
    background: #020617;
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses parallax style vertical lift motion
• Creates perceived depth between layers
• Preserves tile alignment and spacing
• Designed for immersive scroll experiences

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.