From 8827c231e8b69b755b5df5a4225160817c3ac37e Mon Sep 17 00:00:00 2001
From: Xingan Zhao <2081098605@qq.com>
Date: Tue, 1 Oct 2024 20:30:25 +0800
Subject: [PATCH] feat:home
---
src/containers/App/App.css | 139 +++++++++++++++++++++++++++++++++----
src/contents/home.tsx | 120 +++++++++++++++++++++++++++-----
2 files changed, 227 insertions(+), 32 deletions(-)
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 577a86c..a6b61d5 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -233,7 +233,7 @@ footer a:hover {
.custom-header-education {
width: 100vw;
height: 100vh;
- background-image: linear-gradient(rgba(245, 245, 220,0.2), rgba(245, 245, 220,0.2)),url('https://placehold.co/1200x600'); /* 背景图片路径 */
+ background-image: linear-gradient(rgba(245, 245, 220,0.2), rgba(245, 245, 220,0.2)),url('https://static.igem.wiki/teams/5378/education.webp'); /* 背景图片路径 */
background-size: cover; /* 使背景图片覆盖整个容器 */
background-position: center; /* å±…ä¸å¯¹é½èƒŒæ™¯å›¾ç‰‡ */
background-repeat: no-repeat; /* 防æ¢èƒŒæ™¯å›¾ç‰‡é‡å¤ */
@@ -1071,7 +1071,7 @@ span.formula_line::-webkit-scrollbar-track {
.page-container-6 {
position:relative;
- min-height: 80vw;
+ min-height: 100vw;
}
.page-container-7 {
@@ -1081,7 +1081,7 @@ span.formula_line::-webkit-scrollbar-track {
.page-container-8 {
position:relative;
- min-height: 140vw;
+ min-height: 170vw;
}
.page-container-9 {
@@ -1175,6 +1175,17 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 60vw;
}
+ .img-5 {
+ /* position: relative; */
+ opacity: 0;
+ transform: translateX(-20vw);
+ transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-5-active {
+ transform: translateX(0);
+ opacity: 1;
+ transition: transform 1s ease-out, opacity 1s ease-out;
+ }
.page-element-6 {
position: absolute;
right: 10vw;
@@ -1182,6 +1193,18 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 60vw;
}
+ .img-6 {
+ /* position: relative; */
+ opacity: 0;
+ transform: translateX(20vw);
+ transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-6-active {
+ transform: translateX(0);
+ opacity: 1;
+ transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+
.page-element-7 {
position: absolute;
left: 20vw;
@@ -1189,6 +1212,24 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 60vw;
}
+ .img-7 {
+ scale: 0.4;
+ transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-7-active {
+ transform: translateX(0);
+ scale: 1;
+ opacity: 1;
+ transition: transform 1s ease-out, opacity 1s ease-out;
+ animation: element-7 1.5s linear ;
+ }
+
+ @keyframes element-7 {
+ 0% { scale: 0; }
+ 50% { scale: 1.1; }
+ 80% { scale: 1.2; }
+ 100% { scale: 1; }
+}
.page-element-8 {
position: absolute;
left: 30vw;
@@ -1267,16 +1308,29 @@ span.formula_line::-webkit-scrollbar-track {
left: 35vw;
top: 10vw;
height: auto;
- width: 40vw;
+ width: 55vw;
+ }
+ .page-element-15p {
+ position: absolute;
+ left: 13vw;
+ top: 60vw;
+ height: auto;
+ width: 70vw;
}
-
.page-element-16 {
position: absolute;
- left: 17vw;
- top: 0;
+ left: 70vw;
+ top: 10vw;
height: auto;
- width: 80vw;
+ width: 20vw;
+ }
+ .page-element-16p {
+ position: absolute;
+ left: 30vw;
+ top: 10vw;
+ height: auto;
+ width: 40vw;
}
.page-element-17 {
position: absolute;
@@ -1292,13 +1346,72 @@ span.formula_line::-webkit-scrollbar-track {
height: auto;
width: 20vw;
}
- .page-element-19 {
+ .page-element-18p {
position: absolute;
- left: 20vw;
+ left: 58vw;
+ top: 35vw;
+ height: auto;
+ width: 34vw;
+ z-index: 3;
+ }
+ .page-element-18p2 {
+ position: absolute;
+ left: 45vw;
+ top: 60vw;
+ height: auto;
+ width: 40vw;
+ z-index: 2;
+ }
+ .page-element-18p3 {
+ position: absolute;
+ left: 30vw;
top: 10vw;
height: auto;
+ width: 60vw;
+ }
+ .page-element-18p4 {
+ position: absolute;
+ left: 5vw;
+ top: 46vw;
+ height: auto;
width: 50vw;
}
+ .page-element-18p5 {
+ position: absolute;
+ left: 2vw;
+ top: 80vw;
+ height: auto;
+ width: 95vw;
+ }
+ .page-element-18p6 {
+ position: absolute;
+ left: 2vw;
+ top: 79vw;
+ height: auto;
+ width: 62vw;
+ z-index: 3;
+ }
+ .page-element-18p7 {
+ position: absolute;
+ left: 2vw;
+ top: 127vw;
+ height: auto;
+ width: 55vw;
+ }
+ .page-element-18p8 {
+ position: absolute;
+ left: 42vw;
+ top: 127vw;
+ height: auto;
+ width: 55vw;
+ }
+ .page-element-19 {
+ position: absolute;
+ left: 7vw;
+ top: 12vw;
+ height: auto;
+ width: 30vw;
+ }
.page-element-20 {
position: absolute;
left: 30vw;
@@ -1315,10 +1428,10 @@ span.formula_line::-webkit-scrollbar-track {
}
.page-element-21p {
position: absolute;
- left: 10vw;
- top: 6vw;
+ left: 36vw;
+ top: 15vw;
height: auto;
- width: 17vw;
+ width: 8vw;
}
.page-element-22 {
position: absolute;
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index e223601..aac7984 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -1,6 +1,25 @@
-
+import { useEffect, useState } from "react";
+import { Element } from 'react-scroll';
export function Home() {
+ const [activeLink, setActiveLink] = useState<string>('');
+ useEffect(() => {
+ 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) {
+ currentSection = section.id;
+ console.log(currentSection)
+ }
+ });
+ setActiveLink(currentSection);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
return (
<div className="bg-rice_yellow">
@@ -59,33 +78,33 @@ export function Home() {
{/* 3 */}
<div className="page-container-3">
- <div className="page-element-5">
+ <Element name="element-5" id="element-5" className='element page-element-5' >
<img
src="https://static.igem.wiki/teams/5378/home/girlroar.webp"
alt="example"
- className="home-img-wide"
+ className={`home-img-wide ${activeLink === 'element-5' ? 'img-5-active' : 'img-5'}`}
/>
- </div>
+ </Element>
- <div className="page-element-6">
+ <Element name="element-6" id="element-6" className="element page-element-6">
<img
src="https://static.igem.wiki/teams/5378/home/20.webp"
alt="example"
- className="home-img-wide"
+ className={`home-img-wide ${activeLink === 'element-6' ? 'img-6-active' : 'img-6'}`}
/>
- </div>
+ </Element>
</div>
{/* 4 */}
<div className="page-container-4">
- <div className="page-element-7">
+ <Element name="element-7" id="element-7" className="element page-element-7">
<img
src="https://static.igem.wiki/teams/5378/home/21.webp"
alt="example"
- className="home-img-wide"
+ className={`home-img-wide ${activeLink === 'element-7' ? 'img-7-active' : 'img-7'}`}
/>
- </div>
+ </Element>
</div>
{/* 5 */}
<div className="page-container-5">
@@ -149,13 +168,27 @@ export function Home() {
className="home-img-wide"
/>
</div>
+ <div className="page-element-15p">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/d3.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
</div>
{/* 7 */}
<div className="page-container-7">
<div className="page-element-16">
<img
- src="https://static.igem.wiki/teams/5378/home/boywhat.webp"
+ src="https://static.igem.wiki/teams/5378/home/boybigmouth.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
+ <div className="page-element-16p">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/words1.webp"
alt="example"
className="home-img-wide"
/>
@@ -170,34 +203,83 @@ export function Home() {
</div>
{/* 8 */}
<div className="page-container-8">
- <div className="page-element-18">
+ {/* <div className="page-element-18">
<img
src="https://static.igem.wiki/teams/5378/home/28.webp"
alt="example"
className="home-img-wide"
/>
+ </div> */}
+ <div className="page-element-18p">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/smallgut.webp"
+ alt="example"
+ className="home-img-wide"
+ />
</div>
- <div className="page-element-19">
+ <div className="page-element-18p2">
<img
- src="https://static.igem.wiki/teams/5378/home/27.webp"
+ src="https://static.igem.wiki/teams/5378/home/pathway.webp"
alt="example"
className="home-img-wide"
/>
</div>
- <div className="page-element-20">
+ <div className="page-element-18p3">
<img
- src="https://static.igem.wiki/teams/5378/home/8.webp"
+ src="https://static.igem.wiki/teams/5378/home/dialog3.webp"
alt="example"
className="home-img-wide"
/>
</div>
- <div className="page-element-21">
+ <div className="page-element-18p4">
<img
- src="https://static.igem.wiki/teams/5378/home/4.webp"
+ src="https://static.igem.wiki/teams/5378/home/dialog2.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
+ <div className="page-element-18p5">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/dialog1.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
+ <div className="page-element-18p6">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/devil.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
+ <div className="page-element-18p7">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/d1.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
+ <div className="page-element-18p8">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/d2.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div>
+ <div className="page-element-19">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/27.webp"
alt="example"
className="home-img-wide"
/>
</div>
+ {/* <div className="page-element-21">
+ <img
+ src="https://static.igem.wiki/teams/5378/home/4.webp"
+ alt="example"
+ className="home-img-wide"
+ />
+ </div> */}
<div className="page-element-21p">
<img
src="https://static.igem.wiki/teams/5378/home/2.webp"
@@ -211,7 +293,7 @@ export function Home() {
<div className="page-container-9">
<div className="page-element-22">
<img
- src="https://static.igem.wiki/teams/5378/home/future.webp"
+ src="https://static.igem.wiki/teams/5378/home/future2.webp"
alt="example"
className="home-img-wide"
/>
--
GitLab