added scroll motion
This commit is contained in:
Mariia Shabelnik
parent
f237dff5c7
commit
a2d35650c6
18
package-lock.json
generated
18
package-lock.json
generated
@ -11,7 +11,8 @@
|
||||
"hamburger-react": "^2.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.3.0"
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scroll-motion": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.15",
|
||||
@ -1287,6 +1288,15 @@
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scroll-motion": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-scroll-motion/-/react-scroll-motion-0.3.0.tgz",
|
||||
"integrity": "sha512-/7VUbyu0nONmlyQsnivcAOPCdc6GnS6LFL7R3QygtBjVAmA7dD29B/jje3jNa0fLlrwycriXq/Nm9sWgX7A1Bw==",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.11",
|
||||
"react-dom": "^18.0.11"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
@ -2293,6 +2303,12 @@
|
||||
"react-router": "6.3.0"
|
||||
}
|
||||
},
|
||||
"react-scroll-motion": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-scroll-motion/-/react-scroll-motion-0.3.0.tgz",
|
||||
"integrity": "sha512-/7VUbyu0nONmlyQsnivcAOPCdc6GnS6LFL7R3QygtBjVAmA7dD29B/jje3jNa0fLlrwycriXq/Nm9sWgX7A1Bw==",
|
||||
"requires": {}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
"hamburger-react": "^2.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.3.0"
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scroll-motion": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.15",
|
||||
|
||||
28
src/App.css
28
src/App.css
@ -5,15 +5,26 @@
|
||||
}
|
||||
|
||||
.nav .container {
|
||||
height: 3em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 5em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: rgb(47, 46, 58);
|
||||
height: 3em;
|
||||
box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);
|
||||
background-color: #302f38;
|
||||
height: 4em;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/*box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);*/
|
||||
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: #e5e5ff;
|
||||
@ -46,7 +57,8 @@
|
||||
}
|
||||
|
||||
.logo a {
|
||||
text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00, 0 0 30px #ccff00;
|
||||
text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
@ -59,13 +71,13 @@
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
background-color: rgba(47, 46, 58, 0.9);
|
||||
background-color: #302f38;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
backdrop-filter: blur(3px) contrast(60%);
|
||||
-webkit-backdrop-filter: blur(3px) contrast(60%);
|
||||
top: 3em;
|
||||
top: 4em;
|
||||
bottom: 0;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function Contact() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="container content">
|
||||
<h1>Welcome to Contact</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function Experiance() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="container content">
|
||||
<h1>Welcome to Experiance</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,8 +1,75 @@
|
||||
import {
|
||||
Animator,
|
||||
ScrollContainer,
|
||||
ScrollPage,
|
||||
batch,
|
||||
Fade,
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
Move,
|
||||
MoveIn,
|
||||
MoveOut,
|
||||
Sticky,
|
||||
StickyIn,
|
||||
StickyOut,
|
||||
Zoom,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
} from "react-scroll-motion";
|
||||
|
||||
function Home() {
|
||||
const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
|
||||
const FadeUp = batch(Fade(), Move(), Sticky());
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>Welcome to Home + About me</h1>
|
||||
<ScrollContainer>
|
||||
<ScrollPage>
|
||||
<Animator animation={batch(Fade(), Sticky(), MoveOut(0, 200))}>
|
||||
<span>Let me show you scroll animation 😀</span>
|
||||
</Animator>
|
||||
</ScrollPage>
|
||||
|
||||
<ScrollPage>
|
||||
<Animator animation={ZoomInScrollOut}>
|
||||
<span style={{ fontSize: "40px" }}>I'm FadeUpScrollOut ✨</span>
|
||||
</Animator>
|
||||
</ScrollPage>
|
||||
|
||||
<ScrollPage>
|
||||
<Animator animation={FadeUp}>
|
||||
<span style={{ fontSize: "40px" }}>I'm FadeUp ⛅️</span>
|
||||
</Animator>
|
||||
</ScrollPage>
|
||||
|
||||
<ScrollPage>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "40px" }}>
|
||||
<Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
|
||||
<Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻♀️</Animator>
|
||||
- I'm Dante Chun -
|
||||
<Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
|
||||
<Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
|
||||
</span>
|
||||
</div>
|
||||
</ScrollPage>
|
||||
|
||||
<ScrollPage>
|
||||
<Animator animation={batch(Fade(), Sticky())}>
|
||||
<span style={{ fontSize: "40px" }}>Done</span>
|
||||
<br />
|
||||
<span style={{ fontSize: "30px" }}>
|
||||
There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
|
||||
</span>
|
||||
</Animator>
|
||||
</ScrollPage>
|
||||
</ScrollContainer>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user