Parallax

ELI5 — The Vibe Check

Parallax is when background elements scroll slower than foreground elements, creating a fake sense of depth. It was super trendy around 2013, then everyone hated it, and now it's making a tasteful comeback. Use sparingly or your users will get motion sickness.

Real Talk

Parallax scrolling is a visual effect where background and foreground elements move at different speeds during scrolling, creating an illusion of depth. Modern implementations use CSS transforms and will-change for GPU-accelerated performance, avoiding scroll event listeners that cause jank.

Show Me The Code

.parallax-container {
  perspective: 1px;
  overflow-y: auto;
}

.parallax-background {
  transform: translateZ(-1px) scale(2);
}

When You'll Hear This

"A subtle parallax on the hero image adds depth without being annoying" / "Please don't use parallax on the entire page — it causes motion sickness"