Parallax Layer
A copy-paste scroll effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Scroll EffectsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-parallax">
<div class="nuda-parallax__layer nuda-parallax__layer--back">
<!-- Background content -->
<p>Background layer</p>
</div>
<div class="nuda-parallax__layer nuda-parallax__layer--mid">
<!-- Middle content -->
<p>Middle layer</p>
</div>
<div class="nuda-parallax__layer nuda-parallax__layer--front">
<!-- Foreground content -->
<p>Foreground layer</p>
</div>
</div>CSS
/* Parallax Layer
Layers that move at different speeds on scroll using CSS transforms.
Customize: --parallax-height */
.nuda-parallax {
--parallax-height: 400px;
height: var(--parallax-height);
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
transform-style: preserve-3d;
}
.nuda-parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.nuda-parallax__layer--back {
transform: translateZ(-2px) scale(3);
z-index: 1;
}
.nuda-parallax__layer--mid {
transform: translateZ(-1px) scale(2);
z-index: 2;
}
.nuda-parallax__layer--front {
transform: translateZ(0);
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.nuda-parallax {
perspective: none;
transform-style: flat;
}
.nuda-parallax__layer--back,
.nuda-parallax__layer--mid {
transform: none;
}
}How to use Parallax Layer
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.