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

Fullpage homepage !

parent 5409b60c
No related branches found
No related tags found
No related merge requests found
Pipeline #420168 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
package.json
+ 1
− 0
View file @ dce2b9ae
......@@ -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",
......
src/containers/App/App.css
+ 22
− 1
View file @ dce2b9ae
......@@ -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
src/contents/home.tsx
+ 149
− 54
View file @ dce2b9ae
// 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>
// </>
// );
// }
yarn.lock
+ 1
− 1
View file @ dce2b9ae
......@@ -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==
......
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