feat: parallax background

Author: AttAditya

portable/assets/parallax-d.svg

@@ -1,7 +1,9 @@
 // AUTO GENERATED FILE - DO NOT EDIT
 
 const assetData = {
-  'logo.png': '/assets/logo.png'
+  'logo.png': '/assets/logo.png',
+  'parallax-d.svg': '/assets/parallax-d.svg',
+  'parallax-l.svg': '/assets/parallax-l.svg'
 } as const;
 
 export type AssetName = (keyof typeof assetData);

portable/assets/parallax-l.svg

@@ -0,0 +1,17 @@
+import { useAsset } from "@assets";
+import { Container } from "@components/ui/structure/container";
+import { useClasses } from "@styles";
+
+export function Parallax() {
+  return (
+    <Container
+      className={useClasses("parallax")}
+      children={null}
+      attributes={{
+        "img-l-src": `url("${useAsset("parallax-l.svg")}")`,
+        "img-d-src": `url("${useAsset("parallax-d.svg")}")`,
+      }}
+    />
+  )
+}
+

portable/src/assets/assets.ts

@@ -1,4 +1,5 @@
 import { Footer } from "@components/block/footer";
+import { Parallax } from "@components/block/parallax";
 import { Menu } from "@components/kit/menu";
 import { MenuBrand } from "@components/kit/menu-brand";
 import { ScrollTopButton } from "@components/kit/scroll-top-button";
@@ -14,6 +15,8 @@ function Layout({ forwarded, dynamic, children }: LayoutProps) {
   const path = `/${dynamic}/${forwarded?.join('/')}`;
 
   return <>
+    <Parallax />
+
     <Container>
       <Menu position="top-left">
         <MenuBrand />

portable/src/components/block/parallax.tsx

@@ -53,6 +53,7 @@ const classNames = {
   'menu-top-right': 'menu-top-right',
   'node-bg': 'node-bg',
   'node-bg-node': 'node-bg-node',
+  'parallax': 'parallax',
   'scrollpop': 'scrollpop',
   'section': 'section',
   'section-content': 'section-content',

portable/src/routes/home.tsx

@@ -4,6 +4,7 @@
 @import './footer.css';
 @import './hero.css';
 @import './jumps.css';
+@import './parallax.css';
 @import './socials.css';
 @import './sponsor.css';
 @import './timeline.css';

portable/src/styles/styles.ts

@@ -0,0 +1,27 @@
+@keyframes parallax {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-100vh);
+  }
+}
+
+.parallax {
+  position: fixed !important;
+  display: block;
+  width: 100%;
+  height: 200vh;
+  top: 0;
+  left: 0;
+  animation: parallax linear;
+  animation-timeline: scroll();
+  opacity: 0.0625;
+  background-image: var(--img-l-src);
+}
+
+.dark .parallax {
+  background-image: var(--img-d-src);
+}
+

portable/styles/app/block/index.css

@@ -29,10 +29,6 @@
 }
 
 html, body, #app {
-  min-height: 100%;
-  width: 100%;
-  height: 100%;
-
   font-size: 16px;
   font-family: var(--font-sans);
 
@@ -42,16 +38,30 @@ html, body, #app {
   cursor: default;
   position: relative;
   transition: none;
-  overflow-x: hidden;
 }
 
 html, body {
   background-color: var(--color-shine);
 }
 
+html {
+  min-height: 100%;
+  width: 100vw;
+  height: 100%;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 #app {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  max-width: 100%;
 }
 
 svg {
@@ -69,3 +79,7 @@ svg {
   border-radius: 0.25rem;
 }
 
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+