Parallax layers
Three absolutely positioned slabs inside .parallax-layers-card float with different periods and amplitudes; copy sits above them in normal flow.
Depth stack
Back layers move farther and slower—scroll-free parallax for hero bands.
Widely Supported
Quick implementation
@keyframes parallax-float-a {
50% { transform: translateY(-10px); }
}
.parallax-layers-card__layer--back {
animation: parallax-float-c 7s ease-in-out infinite;
}
.parallax-layers-card__layer--mid {
animation: parallax-float-b 5.5s ease-in-out infinite;
}Prompt this to your LLM
Hero illustrations.
You are building faux parallax with CSS only.
Goal: three stacked rectangles with absolute positioning; each translateY oscillates with different duration and amplitude.
Constraints:
- prefers-reduced-motion: freeze at rest.
- Text content stays above layers (z-index).
Return HTML + CSS.Why this matters in 2026
Layered motion suggests spatial hierarchy without shipping WebGL for every landing page.
The logic
Desynchronizing periods avoids repetitive loops; larger motion on “far” layers sells depth.
Accessibility & performance
Disable the oscillation for reduced motion; keep amplitudes small on mobile.