ethshit
/
unaboomer-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

messing with parallax and effects, multi-page

Browse Source
master
lza_menace 2 years ago
parent 7539014894
commit 88868c0e16
5 changed files with 120 additions and 13 deletions
Show Stats Download Patch File Download Diff File

90
package-lock.json generated
Unescape Escape View File

@ -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",

3
package.json
Unescape Escape View File

@ -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"
},

BIN
src/dt.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

19
src/index.js
Unescape Escape View File

@ -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 />
</RainbowKitProvider>
<ParticlesBg type="cobweb" num={400} bg={{
<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>
</WagmiConfig>
</ParallaxProvider>
);

15
src/styles.css
Unescape Escape View File

@ -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 {
height: 500vh;
} */
#root {
height: 400vh;
}
.section {
height: 100vh;
}
footer::before {
display: block;

Write Preview
Loading…
Cancel
Save