subtle-parallax

name	subtle-parallax
description	Use when adding depth via parallax. Subtle parallax (20-40% movement) adds depth without disorientation.

Subtle Parallax

Parallax = different scroll speeds. Subtle (20-40% of normal scroll) feels editorial; aggressive (>50%) feels like a Tron demo.

Subtle parallax implementation

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.parallax-bg {
  position: absolute;
  inset: -50% 0 0 0;  /* extra room for parallax movement */
  background: url('hero.jpg') no-repeat center/cover;
  transform: translateZ(-1px) scale(2);
}

JS approach:

window.addEventListener('scroll', () => {
  const scrolled = window.pageYOffset;
  const speed = 0.3;
  parallax.style.transform = `translateY(${scrolled * speed}px)`;
});

Parallax discipline

1. Subtle movement (20-40% of scroll speed)
2. Single parallax layer per section (not 5)
3. Disable on mobile (performance + disorientation)
4. Respect prefers-reduced-motion
5. Test on slower devices

Avoid

1. Aggressive parallax (>50% movement)
2. Multiple parallax layers stacked
3. Parallax on critical content (reading)
4. Parallax on mobile (laggy)
5. Parallax that fights with browser scroll

Where this fits in the X3 empire

Subtle parallax used on CardPrepAI hero sections.