make pretty scroll

master
lza_menace 2 years ago
parent 1ffe45b546
commit c2fd503e6b

29
package-lock.json generated

@ -18,6 +18,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-parallax": "^3.5.1", "react-parallax": "^3.5.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
"react-scroll-parallax": "^3.3.2", "react-scroll-parallax": "^3.3.2",
"react-ts-typewriter": "^0.1.8-b", "react-ts-typewriter": "^0.1.8-b",
"typescript": "^4.9.4", "typescript": "^4.9.4",
@ -17223,8 +17224,7 @@
"node_modules/lodash.throttle": { "node_modules/lodash.throttle": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==", "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
"peer": true
}, },
"node_modules/lodash.uniq": { "node_modules/lodash.uniq": {
"version": "4.5.0", "version": "4.5.0",
@ -21878,6 +21878,19 @@
} }
} }
}, },
"node_modules/react-scroll": {
"version": "1.8.9",
"resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
"integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
"dependencies": {
"lodash.throttle": "^4.1.1",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-scroll-parallax": { "node_modules/react-scroll-parallax": {
"version": "3.3.2", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz", "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",
@ -38394,8 +38407,7 @@
"lodash.throttle": { "lodash.throttle": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==", "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
"peer": true
}, },
"lodash.uniq": { "lodash.uniq": {
"version": "4.5.0", "version": "4.5.0",
@ -41746,6 +41758,15 @@
"workbox-webpack-plugin": "^6.4.1" "workbox-webpack-plugin": "^6.4.1"
} }
}, },
"react-scroll": {
"version": "1.8.9",
"resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
"integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
"requires": {
"lodash.throttle": "^4.1.1",
"prop-types": "^15.7.2"
}
},
"react-scroll-parallax": { "react-scroll-parallax": {
"version": "3.3.2", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz", "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",

@ -15,6 +15,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-parallax": "^3.5.1", "react-parallax": "^3.5.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
"react-scroll-parallax": "^3.3.2", "react-scroll-parallax": "^3.3.2",
"react-ts-typewriter": "^0.1.8-b", "react-ts-typewriter": "^0.1.8-b",
"typescript": "^4.9.4", "typescript": "^4.9.4",

@ -27,13 +27,13 @@
} }
#heroImage { #heroImage {
max-width: 300px; max-width: 240px;
margin: 0 auto; margin: 1em auto;
animation: fadeIn 4s ease-in; animation: fadeIn 4s ease-in;
} }
.fadeIn { .fadeIn {
animation: fadeIn 6s ease-in; animation: fadeIn 4s ease-in;
} }
@keyframes fadeIn { @keyframes fadeIn {

@ -1,8 +1,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { BigNumber, ethers } from 'ethers'; import { ethers } from 'ethers';
import Typewriter from 'react-ts-typewriter'; import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider'; import Slider from 'rc-slider';
import { Parallax } from 'react-parallax'; import { Parallax } from 'react-parallax';
import { animateScroll as scroll } from 'react-scroll'
import { AwesomeButton } from 'react-awesome-button'; import { AwesomeButton } from 'react-awesome-button';
import Boomer from '../img/unaboomer.png'; import Boomer from '../img/unaboomer.png';
@ -34,6 +36,11 @@ export class Section1 extends React.Component {
<Typewriter text={this.state.title} cursor={true} random={20} /> <Typewriter text={this.state.title} cursor={true} random={20} />
</h1> </h1>
<img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} alt="Pixelated police sketch of the Unabomber suspect." /> <img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} alt="Pixelated police sketch of the Unabomber suspect." />
<div className={this.state.showImage || "hidden" }>
<AwesomeButton type="secondary" ripple={true} onPress={() => scroll.scrollToBottom({duration: 4500})} className="fadeIn">
continue
</AwesomeButton>
</div>
</section> </section>
) )
} }
@ -67,7 +74,7 @@ export function Section3() {
<p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Unabomber - a Web3 Unaboomer.</p> <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Unabomber - a Web3 Unaboomer.</p>
<img src={Boomer} alt="" width="120px" /> <img src={Boomer} alt="" width="120px" />
<p> <p>
<AwesomeButton ripple={true}> <AwesomeButton type="secondary" ripple={true}>
mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ) mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)
</AwesomeButton> </AwesomeButton>
</p> </p>
@ -82,7 +89,7 @@ export function Section3() {
<p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - send to other Unaboomers to kill them.</p> <p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - send to other Unaboomers to kill them.</p>
<img src={Bomb} alt="" width="100px" /> <img src={Bomb} alt="" width="100px" />
<p> <p>
<AwesomeButton ripple={true}> <AwesomeButton type="secondary" ripple={true}>
mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ) mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)
</AwesomeButton> </AwesomeButton>
</p> </p>
@ -96,8 +103,8 @@ export function Section3() {
<p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process!</p> <p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process!</p>
<img src={Explosion} alt="" width="120px" /> <img src={Explosion} alt="" width="120px" />
<p> <p>
<AwesomeButton ripple={true}> <AwesomeButton type="secondary" ripple={true}>
send {sendBombAmount} (~0 Ξ) send {sendBombAmount} (~0 Ξ)
</AwesomeButton> </AwesomeButton>
</p> </p>
<Slider className="slider" min={1} max={30} trackStyle={{ <Slider className="slider" min={1} max={30} trackStyle={{

Loading…
Cancel
Save