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

make pretty scroll

Browse Source
master
lza_menace 2 years ago
parent 1ffe45b546
commit c2fd503e6b
4 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File

29
package-lock.json generated
Unescape Escape View File

@ -18,6 +18,7 @@
"react-dom": "^18.2.0",
"react-parallax": "^3.5.1",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
"react-scroll-parallax": "^3.3.2",
"react-ts-typewriter": "^0.1.8-b",
"typescript": "^4.9.4",
@ -17223,8 +17224,7 @@
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
"peer": true
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"node_modules/lodash.uniq": {
"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": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",
@ -38394,8 +38407,7 @@
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
"peer": true
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"lodash.uniq": {
"version": "4.5.0",
@ -41746,6 +41758,15 @@
"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": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",

1
package.json
Unescape Escape View File

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

6
src/styles/sections.css
Unescape Escape View File

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

17
src/template/Sections.jsx
Unescape Escape View File

@ -1,8 +1,10 @@
import React, { useState } from 'react';
import { BigNumber, ethers } from 'ethers';
import { ethers } from 'ethers';
import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider';
import { Parallax } from 'react-parallax';
import { animateScroll as scroll } from 'react-scroll'
import { AwesomeButton } from 'react-awesome-button';
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} />
</h1>
<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>
)
}
@ -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>
<img src={Boomer} alt="" width="120px" />
<p>
<AwesomeButton ripple={true}>
<AwesomeButton type="secondary" ripple={true}>
mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)
</AwesomeButton>
</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>
<img src={Bomb} alt="" width="100px" />
<p>
<AwesomeButton ripple={true}>
<AwesomeButton type="secondary" ripple={true}>
mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)
</AwesomeButton>
</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>
<img src={Explosion} alt="" width="120px" />
<p>
<AwesomeButton ripple={true}>
send {sendBombAmount} (~0 Ξ)
<AwesomeButton type="secondary" ripple={true}>
send {sendBombAmount} (~0 Ξ)
</AwesomeButton>
</p>
<Slider className="slider" min={1} max={30} trackStyle={{

Write Preview
Loading…
Cancel
Save