Skip to content
Snippets Groups Projects
Commit 282132ad authored by Xingan Zhao's avatar Xingan Zhao
Browse files

feat:home animation

parent dcd89f5d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/containers/App/App.css
+ 127
− 7
View file @ 282132ad
......@@ -1120,7 +1120,7 @@ span.formula_line::-webkit-scrollbar-track {
}
@keyframes element-1 {
0% { opacity: 0; }
60% { opacity: 0; }
40% { opacity: 0; }
70% { opacity: 1; }
100% { opacity: 1; }
}
......@@ -1278,9 +1278,7 @@ span.formula_line::-webkit-scrollbar-track {
opacity: 1;
transition: transform 1s ease-out, opacity 1s ease-out;
animation: element-7 1.5s linear ;
}
@keyframes element-7 {
}@keyframes element-7 {
0% { scale: 0; }
50% { scale: 1.1; }
80% { scale: 1.2; }
......@@ -1293,6 +1291,24 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 30vw;
}
.img-8 {
scale: 1;
transition: transform 1s ease-out, opacity 1s ease-out;
}
.img-8-active {
transform: translateX(0);
scale: 1;
opacity: 1;
transition: transform 1s ease-out, opacity 1s ease-out;
animation: element-8 0.8s linear infinite;
}@keyframes element-8 {
0% { transform: rotate(0deg); }
33% { transform: rotate(6deg); }
67% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
.page-element-9 {
position: absolute;
left: 20vw;
......@@ -1307,6 +1323,20 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 30vw;
}
.img-10 {
transition: transform 1s ease-out, opacity 1s ease-out;
}
.img-10-active {
transform: translateX(0);
transition: transform 1s ease-out, opacity 1s ease-out;
animation: element-10 1s linear infinite;
}@keyframes element-10 {
0% { transform: rotate(0deg) scale(1); }
33% { transform: rotate(3deg) scale(1.1); }
67% { transform: rotate(-3deg) scale(1);}
100% { transform: rotate(0deg) scale(1); }
}
.page-element-11 {
position: absolute;
left: 22vw;
......@@ -1314,6 +1344,20 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 50vw;
}
.img-11 {
transition: transform 1s ease-out, opacity 1s ease-out;
}
.img-11-active {
transform: translateX(0);
transition: transform 1s ease-out, opacity 1s ease-out;
animation: element-11 1s linear infinite;
}@keyframes element-11 {
0% { transform: translateX(0); }
33% { transform: translateX(1vw); }
67% { transform: translateX(-1vw);}
100% { transform: translateX(0); }
}
.page-element-12 {
position: absolute;
left: 50vw;
......@@ -1361,11 +1405,27 @@ span.formula_line::-webkit-scrollbar-track {
}
.page-element-15 {
position: absolute;
left: 35vw;
left: 30vw;
top: 10vw;
height: auto;
width: 55vw;
}
.img-15 {
transform-origin: center;
animation: rotate-head 7s linear infinite;
}@keyframes rotate-head {
0% {
transform: rotate(0deg) scale(0.7);
}
50% {
transform: rotate(180deg) scale(0.5);
}
100% {
transform: rotate(360deg) scale(0.7);
}
}
.page-element-15p {
position: absolute;
left: 13vw;
......@@ -1381,13 +1441,52 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 20vw;
}
.img-16 {
opacity: 0;;
}
.img-16-active {
transform: translateX(0);
transition: transform 1s ease-out, opacity 1s ease-out;
animation: element-16 1s linear;
}@keyframes element-16 {
0% {
opacity: 0;
transform: translateY(0) ; }
33% {
opacity: 1;
transform: translateY(1vw); }
67% {
opacity: 1;
transform: translateY(-1vw);}
100% {
opacity: 1;
transform: translateY(0); }
}
.page-element-16p {
position: absolute;
left: 30vw;
top: 10vw;
left: -40vw;
top: 0vw;
height: auto;
width: 40vw;
}
.img-16p {
opacity: 0;
}
.img-16p-active {
opacity: 1;
animation: element-16p 1s linear;
}@keyframes element-16p {
0% {
opacity: 0; }
33% {
opacity: 1; }
67% {
opacity: 1;}
100% {
opacity: 1;}
}
.page-element-17 {
position: absolute;
left: 3vw;
......@@ -1395,6 +1494,27 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 80vw;
}
.img-17 {
opacity: 0;
}
.img-17-active {
opacity: 1;
animation: element-17 1s linear;
}@keyframes element-17 {
0% {
opacity: 0;
transform: translateY(0) ; }
33% {
opacity: 1;
transform: translateY(1vw); }
67% {
opacity: 1;
transform: translateY(-1vw);}
100% {
opacity: 1;
transform: translateY(0); }
}
.page-element-18 {
position: absolute;
left: 75vw;
......
src/contents/home.tsx
+ 23
− 22
View file @ 282132ad
......@@ -7,7 +7,6 @@ export function Home() {
const handleScroll = () => {
const sections = document.querySelectorAll('.element');
let currentSection = '';
console.log(sections)
sections.forEach(section => {
const sectionTop = section.getBoundingClientRect().top;
if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
......@@ -129,13 +128,13 @@ export function Home() {
</div>
{/* 5 */}
<div className="page-container-5">
<div className="page-element-8">
<Element name="element-8" id="element-8" className="element page-element-8">
<img
src="https://static.igem.wiki/teams/5378/home/nh3.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-8' ? 'img-8-active' : 'img-8'}`}
/>
</div>
</Element>
<div className="page-element-9">
<img
src="https://static.igem.wiki/teams/5378/home/path.webp"
......@@ -143,20 +142,20 @@ export function Home() {
className="home-img-wide"
/>
</div>
<div className="page-element-10">
<Element name="element-10" id="element-10" className="element page-element-10">
<img
src="https://static.igem.wiki/teams/5378/home/hepacry.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-10' ? 'img-10-active' : 'img-10'}`}
/>
</div>
<div className="page-element-11">
</Element>
<Element name="element-11" id="element-11" className="element page-element-11">
<img
src="https://static.igem.wiki/teams/5378/home/gut.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-11' ? 'img-11-active' : 'img-11'}`}
/>
</div>
</Element>
</div>
{/* 6 */}
......@@ -182,13 +181,13 @@ export function Home() {
className="home-img-wide"
/>
</div>
<div className="page-element-15">
<Element name="element-15" id="element-15" className="element page-element-15">
<img
src="https://static.igem.wiki/teams/5378/home/boyhead.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-15' ? 'img-15' : 'img-15'}`}
/>
</div>
</Element>
<div className="page-element-15p">
<img
src="https://static.igem.wiki/teams/5378/home/d3.webp"
......@@ -200,27 +199,29 @@ export function Home() {
{/* 7 */}
<div className="page-container-7">
<div className="page-element-16">
<Element name="element-16" id="element-16" className="element page-element-16">
<img
src="https://static.igem.wiki/teams/5378/home/boybigmouth.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-16' ? 'img-16-active' : 'img-16'}`}
/>
</div>
<div className="page-element-16p">
<div className="page-element-16p">
<img
src="https://static.igem.wiki/teams/5378/home/words1.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-16' ? 'img-16p-active' : 'img-16p'}`}
/>
</div>
<div className="page-element-17">
</div>
</Element>
<Element name="element-17" id="element-17" className="element page-element-17">
<img
src="https://static.igem.wiki/teams/5378/home/girlfort.webp"
alt="example"
className="home-img-wide"
className={`home-img-wide ${activeLink === 'element-17' ? 'img-17-active' : 'img-17'}`}
/>
</div>
</Element>
</div>
{/* 8 */}
<div className="page-container-8">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment