messing with parallax and effects, multi-page

package-lock.json

@@ -17,8 +17,11 @@
         "react": "^18.2.0",
         "react-awesome-button": "^7.0.4",
         "react-dom": "^18.2.0",
+        "react-parallax": "^3.5.1",
         "react-scripts": "5.0.1",
+        "react-scroll-parallax": "^3.3.2",
         "react-ts-typewriter": "^0.1.8-b",
+        "react-visibility-sensor": "^5.1.1",
         "typescript": "^4.9.4",
         "wagmi": "^0.9.2"
       }
@@ -9049,6 +9052,11 @@
       "resolved": "https://registry.npmjs.org/bech32/-/bech32-1.1.4.tgz",
       "integrity": "sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ=="
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "node_modules/bfj": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -19873,6 +19881,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/parallax-controller": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.6.0.tgz",
+      "integrity": "sha512-IVRuEMMcLtAnlthB3MJ+bzkOQWz26DESXsP3x+CBsGjIjmXxLr+l1IkR799dQETXgGBZQTUyhRUXFaThBc6+lA==",
+      "dependencies": {
+        "bezier-easing": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -22047,6 +22066,15 @@
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==",
       "peer": true
     },
+    "node_modules/react-parallax": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/react-parallax/-/react-parallax-3.5.1.tgz",
+      "integrity": "sha512-p5zPsPsqELlIOGaPS01O0IRx8R2bxcBAtrdF/RHf9nIxxk5hijbM2y89tk4rJQBcNH6ESSLe7J2NV4/ms7FLFw==",
+      "peerDependencies": {
+        "react": "16.x.x || 17.x.x || 18.x.x",
+        "react-dom": "16.x.x || 17.x.x || 18.x.x"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -22172,6 +22200,21 @@
         }
       }
     },
+    "node_modules/react-scroll-parallax": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",
+      "integrity": "sha512-mLgcLqyFhrIp31gLjz11yYmWEwS8NJoOoCZ15ZFXPOcpPQK8R+jZfeuO59Trm9bReok/iDUyx3ZyCCZjkxj37Q==",
+      "dependencies": {
+        "parallax-controller": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0",
+        "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -22231,6 +22274,18 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/react-visibility-sensor": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz",
+      "integrity": "sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -32638,6 +32693,11 @@
       "resolved": "https://registry.npmjs.org/bech32/-/bech32-1.1.4.tgz",
       "integrity": "sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ=="
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "bfj": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -40861,6 +40921,14 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
+    "parallax-controller": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.6.0.tgz",
+      "integrity": "sha512-IVRuEMMcLtAnlthB3MJ+bzkOQWz26DESXsP3x+CBsGjIjmXxLr+l1IkR799dQETXgGBZQTUyhRUXFaThBc6+lA==",
+      "requires": {
+        "bezier-easing": "^2.1.0"
+      }
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -42277,6 +42345,12 @@
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==",
       "peer": true
     },
+    "react-parallax": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/react-parallax/-/react-parallax-3.5.1.tgz",
+      "integrity": "sha512-p5zPsPsqELlIOGaPS01O0IRx8R2bxcBAtrdF/RHf9nIxxk5hijbM2y89tk4rJQBcNH6ESSLe7J2NV4/ms7FLFw==",
+      "requires": {}
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -42358,6 +42432,14 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-scroll-parallax": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",
+      "integrity": "sha512-mLgcLqyFhrIp31gLjz11yYmWEwS8NJoOoCZ15ZFXPOcpPQK8R+jZfeuO59Trm9bReok/iDUyx3ZyCCZjkxj37Q==",
+      "requires": {
+        "parallax-controller": "^1.5.0"
+      }
+    },
     "react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -42398,6 +42480,14 @@
         "react-dom": "^18.2.0"
       }
     },
+    "react-visibility-sensor": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz",
+      "integrity": "sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -14,8 +14,11 @@
     "react": "^18.2.0",
     "react-awesome-button": "^7.0.4",
     "react-dom": "^18.2.0",
+    "react-parallax": "^3.5.1",
     "react-scripts": "5.0.1",
+    "react-scroll-parallax": "^3.3.2",
     "react-ts-typewriter": "^0.1.8-b",
+    "react-visibility-sensor": "^5.1.1",
     "typescript": "^4.9.4",
     "wagmi": "^0.9.2"
   },

src/index.js

@@ -12,6 +12,8 @@ import { mainnet, goerli, localhost } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 
 import ParticlesBg from "particles-bg";
+import VisibilitySensor from "react-visibility-sensor";
+import { ParallaxProvider, Parallax } from 'react-scroll-parallax';
 
 import { Wallet } from "./Wallet";
 import { Panel } from "./template/Panel";
@@ -36,15 +38,26 @@ const wagmiClient = createClient({
 });
 
 ReactDOM.createRoot(document.getElementById("root")).render(
+  <ParallaxProvider>
     <WagmiConfig client={wagmiClient}>
         <RainbowKitProvider chains={chains}>
             <Wallet />
-            <Panel />
+            <ParticlesBg type="cobweb" num={10} bg={{
+                position: "fixed",
+                zIndex: -1,
+            }}/>
+            <section id="sec1" className="section">
+                <Parallax speed={-50}>
+                    <h1>omg</h1>
+                </Parallax>
+            </section>
+            <section id="sec2" className="section">
+                <Parallax speed={-10} easing="easeOutQuad" style={{ op }}>
+                    <Panel />
+                </Parallax>
+            </section>
+            <Footer title="Send me your ETH you worthless piece of shit. Nobody loves you." />
         </RainbowKitProvider>
-        <ParticlesBg type="cobweb" num={400} bg={{
-            position: "fixed",
-            zIndex: -1,
-        }}/>
-        <Footer title="Send me your ETH you worthless piece of shit. Nobody loves you." />
     </WagmiConfig>
+  </ParallaxProvider>
 );

src/styles.css

@@ -1,14 +1,11 @@
 .mainPanel {
   backdrop-filter: blur(3px);
   background-color: rgba(255,255,255,0.6);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   height: 300px;
   width: 300px;
   text-align: center;
   border-radius: 10px;
+  margin: 0 auto;
 }
 
 .wrap {
@@ -140,9 +137,13 @@ body {
     line-height: 14px;
   }
   
-  /* #root {
+  #root {
-    height: 500vh;
+    height: 400vh;
-  } */
+  }
+
+  .section {
+    height: 100vh;
+  }
   
   footer::before {
     display: block;