Parallax Sections

atlas-ui/parallax-sections-html

FreeUtility

A simple Parallax effect using HTML, CSS, JavaScript and Motion.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://atlasui.dev/r/parallax-sections-html.json

Source

registry/html/atlasui/parallax-sections/index.htmlatlasui.dev/r/parallax-sections-html.json

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Parallax Sections - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <div id="parallax-container">
11      <section class="section1">
12        <h1>This section is Cool.</h1>
13      </section>
14 
15      <section class="section2">
16        <h1>This is Cooler!</h1>
17      </section>
18    </div>
19  </body>
20 
21  <script type="module" src="script.js"></script>
22</html>

What it pulls in

npm packages

motion

Files it writes

registry/html/atlasui/parallax-sections/index.html
registry/html/atlasui/parallax-sections/style.css
registry/html/atlasui/parallax-sections/script.js

More from atlas-ui

All 99 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Mobile Navbaranimated-mobile-navbar-html	atlas-ui	Utilities	Free	1 dep · 3 files
Blend Mouse Trailerblend-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Blob Mouse Trailerblob-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Box Revealbox-reveal-html	atlas-ui	Utilities	Free	1 dep · 3 files
Cascade Textcascade-text-html	atlas-ui	Utilities	Free	1 dep · 3 files
Dot And Circle Mouse Trailerdot-and-circle-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Fancy Theme Togglefancy-theme-toggle-html	atlas-ui	Utilities	Free	2 deps · 3 files
Hacker Texthacker-text-html	atlas-ui	Utilities	Free	no deps · 3 files