{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "parallax-sections-html",
"title": "Parallax Sections",
"description": "A simple Parallax effect using HTML, CSS, JavaScript and Motion.",
"dependencies": [
"motion"
],
"files": [
{
"path": "registry/html/atlasui/parallax-sections/index.html",
"content": "\n\n \n \n \n Parallax Sections - Atlas UI\n \n \n \n \n \n This section is Cool.
\n \n\n \n
\n \n\n \n\n",
"type": "registry:file",
"target": "~/parallax-sections/index.html"
},
{
"path": "registry/html/atlasui/parallax-sections/style.css",
"content": ":root {\n --background: light-dark(\n oklch(100% 0.00011 271.152),\n oklch(18.22% 0.00002 271.152)\n );\n --foreground: light-dark(\n oklch(18.22% 0.00002 271.152),\n oklch(98.511% 0.00011 271.152)\n );\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody,\nhtml {\n font-family: sans-serif;\n position: relative;\n color-scheme: light dark;\n background-color: var(--background);\n}\n\n#parallax-container {\n width: 100%;\n height: 200vh;\n position: relative;\n}\n\n.section1 {\n position: sticky;\n top: 0;\n background-color: #404040;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n will-change: transform;\n}\n\n.section2 {\n background-color: #ef4444;\n position: relative;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n will-change: transform;\n}\n\nh1 {\n font-size: 3rem;\n font-weight: bold;\n color: var(--foreground);\n}\n",
"type": "registry:file",
"target": "~/parallax-sections/style.css"
},
{
"path": "registry/html/atlasui/parallax-sections/script.js",
"content": "import { scroll, transform } from \"motion\";\n\nconst container = document.getElementById(\"#parallax-container\");\nconst section1 = document.querySelector(\".section1\");\nconst section2 = document.querySelector(\".section2\");\n\nscroll(\n (progress) => {\n const scale1 = transform(progress, [0, 1], [1, 0.8]);\n const rotate1 = transform(progress, [0, 1], [0, -5]);\n section1.style.transform = `scale(${scale1}) rotate(${rotate1}deg)`;\n\n const scale2 = transform(progress, [0, 1], [0.8, 1]);\n const rotate2 = transform(progress, [0, 1], [-5, 0]);\n section2.style.transform = `scale(${scale2}) rotate(${rotate2}deg)`;\n },\n {\n target: container,\n offset: [\"start start\", \"end end\"],\n },\n);\n",
"type": "registry:file",
"target": "~/parallax-sections/script.js"
}
],
"meta": {
"framework": "html"
},
"type": "registry:file"
}