From dce2b9ae989d8776283e97a3a0563ae17258a88c Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Fri, 13 Sep 2024 19:53:17 +0800
Subject: [PATCH] Fullpage homepage !
---
package.json | 1 +
src/containers/App/App.css | 23 ++++-
src/contents/home.tsx | 203 +++++++++++++++++++++++++++----------
yarn.lock | 2 +-
4 files changed, 173 insertions(+), 56 deletions(-)
diff --git a/package.json b/package.json
index c638b80..c92d244 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "@popperjs/core": "^2.11.8",
"axios": "^1.7.7",
"bootstrap": "^5.3.3",
"react": "^18.2.0",
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index fdda5df..24d9682 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -305,7 +305,7 @@ footer a:hover {
.promotion-video {
width: 100%;
- height: 100%; /* 设置高度为视å£é«˜åº¦çš„80% */
+ height: 50vh; /* 设置高度为视å£é«˜åº¦çš„80% */
border: none;
border-radius: 30px; /* 圆角效果 */
}
@@ -581,4 +581,25 @@ footer a:hover {
.center-block {
height: 40%;
+}
+
+.fullpage-container {
+ scroll-snap-type: y mandatory; /* å¯ç”¨åž‚ç›´æ–¹å‘æ•æ‰ */
+ height: 100vh;
+ overflow-y: scroll;
+}
+
+.section {
+ padding-top: 20px;
+ height: 100vh;
+ /* display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 3rem; */
+ scroll-snap-align: start; /* 滚动到页é¢å¼€å§‹ */
+ transition: transform 0.5s ease-in-out; /* æ·»åŠ æ»šåŠ¨åŠ¨ç”» */
+}
+
+.vh20 {
+ height: 20vh;
}
\ No newline at end of file
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index 81504d1..ecc9305 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -1,44 +1,61 @@
// import { url } from "inspector";
+import React, { useRef } from "react";
+
export function Home() {
+ const containerRef = useRef<HTMLDivElement>(null);
+ const sectionRefs = useRef<(HTMLDivElement | null)[]>([]); // 储å˜æ¯ä¸ªsection的引用
+ let currentPage = 0; // 当å‰é¡µé¢ç´¢å¼•
+
+ const scrollToSection = (index: number) => {
+ if (containerRef.current && sectionRefs.current[index]) {
+ const target = sectionRefs.current[index];
+ if (target) {
+ target.scrollIntoView({
+ behavior: "smooth",
+ });
+ currentPage = index;
+ }
+ }
+ };
+ const handleScroll = (event: React.WheelEvent) => {
+ if (event.deltaY > 0) {
+ // å‘下滚动
+ if (currentPage < sectionRefs.current.length - 1) {
+ scrollToSection(currentPage + 1);
+ }
+ } else {
+ // å‘上滚动
+ if (currentPage > 0) {
+ scrollToSection(currentPage - 1);
+ }
+ }
+ };
+
+ return (
+ <div
+ className="fullpage-container"
+ ref={containerRef}
+ onWheel={handleScroll}
+ >
+ <section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[0] = el as HTMLDivElement)}>
+ <div className="row">
- return (
- <>
- <div className="custom-header-home">
-<h1 className="centered-title">HOME</h1>
-</div>
- <div className="container-fluid">
- <div className="row justify-content-center bg-rice_yellow ">
-
- <div className="col-md-8 row justify-content-center ">
- <div className="row justify-content-center h1 full-height-element">
- Section 1
- <img
- src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
- alt="dungreed"
- className="responsive-img"
- />
- </div>
- <div className="row justify-content-center h1 full-height-element">
- Section 2
- <img
- src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
- alt="dungreed"
- className="responsive-img"
- />
- </div>
- <div className="row justify-content-center h1 full-height-element">
- Section 3
- <img
+ <div className="col-3"></div>
+ <div className="col-6">
+ <div className="vh20"></div>
+ <img
src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
- alt="dungreed"
+ alt="zxa"
className="responsive-img"
/>
+ </div>
+ <div className="col-3"></div>
</div>
-
- <div className="row justify-content-center h1 full-height-element">
- <div className="row">
+ </section>
+ <section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[1] = el as HTMLDivElement)}>
+ <div className="row">
<div>我是å°ç›’å</div>
<div className="rounded-border">有橙色边框的å°ç›’å</div>
<p>大家好，我是文本</p>
@@ -48,23 +65,22 @@ export function Home() {
<p className="red-font">红色的文本</p>
<p className="green-font">绿色的文本</p>
<p className="blue-font">è“色的文本</p>
- <p className="bold-font red-font center-text">å åŠ äº†å¤šç§å±žæ€§çš„文本，
+ <p className="red-font center-text">å åŠ äº†å¤šç§å±žæ€§çš„文本，
<span className="bold-font">æ’入了粗体</span>æ–‡å—</p>
+ <h1>ä¸€çº§æ ‡é¢˜</h1>
+ <h2>äºŒçº§æ ‡é¢˜</h2>
+ <h3>ä¸‰çº§æ ‡é¢˜</h3>
+ <h4>å››çº§æ ‡é¢˜</h4>
</div>
- </div>
-
- <div className="full-height-element">
- <h1>ä¸€çº§æ ‡é¢˜</h1>
- <h2>äºŒçº§æ ‡é¢˜</h2>
- <h3>ä¸‰çº§æ ‡é¢˜</h3>
- <h4>å››çº§æ ‡é¢˜</h4>
- </div>
+ </section>
- <div className="row full-height-element">
- <p className="center-text h1 pb-0 mb-0">Stream our Promotion Video</p>
- <div className="col-1"></div>
- <div className="col-10 mb-5">
- <iframe
+ <section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[2] = el as HTMLDivElement)}>
+ <div className="row">
+ <div className="col-3"></div>
+
+ <div className="col-6 mb-5">
+ <div className="vh20 row h1 justify-content-center">Stream our PV!!!</div>
+ <iframe
title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"
className="promotion-video"
src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"
@@ -72,16 +88,95 @@ export function Home() {
sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</div>
- <div className="col-1"></div>
+ <div className="col-3"></div>
+ </div>
+ </section>
+ </div>
+ );
+ };
- </div>
+
+
+
+// return (
+// <>
+// <div className="custom-header-home">
+// <h1 className="centered-title">HOME</h1>
+// </div>
+// <div className="container-fluid">
+// <div className="row justify-content-center bg-rice_yellow ">
+
+// <div className="col-md-8 row justify-content-center ">
+// <div className="row justify-content-center h1 full-height-element">
+// Section 1
+// <img
+// src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+// alt="dungreed"
+// className="responsive-img"
+// />
+// </div>
+// <div className="row justify-content-center h1 full-height-element">
+// Section 2
+ // <img
+ // src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+ // alt="dungreed"
+ // className="responsive-img"
+ // />
+// </div>
+// <div className="row justify-content-center h1 full-height-element">
+// Section 3
+// <img
+// src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+// alt="dungreed"
+// className="responsive-img"
+// />
+// </div>
+
+// <div className="row justify-content-center h1 full-height-element">
+ // <div className="row">
+ // <div>我是å°ç›’å</div>
+ // <div className="rounded-border">有橙色边框的å°ç›’å</div>
+ // <p>大家好，我是文本</p>
+ // <p className="indent">大家好啊，我的开头有缩进</p>
+ // <p className="center-text">大家好ï¼æˆ‘是居ä¸æ–‡æœ¬ï¼</p>
+ // <p className="bold-font">粗粗的文本</p>
+ // <p className="red-font">红色的文本</p>
+ // <p className="green-font">绿色的文本</p>
+ // <p className="blue-font">è“色的文本</p>
+ // <p className="bold-font red-font center-text">å åŠ äº†å¤šç§å±žæ€§çš„文本，
+ // <span className="bold-font">æ’入了粗体</span>æ–‡å—</p>
+ // </div>
+// </div>
+
+// <div className="full-height-element">
+ // <h1>ä¸€çº§æ ‡é¢˜</h1>
+ // <h2>äºŒçº§æ ‡é¢˜</h2>
+ // <h3>ä¸‰çº§æ ‡é¢˜</h3>
+ // <h4>å››çº§æ ‡é¢˜</h4>
+// </div>
+
+// <div className="row full-height-element">
+// <p className="center-text h1 pb-0 mb-0">Stream our Promotion Video</p>
+// <div className="col-1"></div>
+// <div className="col-10 mb-5">
+// <iframe
+// title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"
+// className="promotion-video"
+// src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"
+// allowFullScreen={true}
+// sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
+// </iframe>
+// </div>
+// <div className="col-1"></div>
+
+// </div>
- </div>
- </div>
- </div>
- </>
- );
-}
+// </div>
+// </div>
+// </div>
+// </>
+// );
+// }
diff --git a/yarn.lock b/yarn.lock
index ac23f6e..49ced5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -435,7 +435,7 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
-"@popperjs/core@^2.11.6":
+"@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
version "2.11.8"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
--
GitLab