admin/haiguji-website-export
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页整体改版：参考 tutti.sh 的丝滑转场与创意展示效果

Browse Source 
- 引入 Lenis 平滑滚动 + GSAP ScrollTrigger 驱动的分区揭示动画
- 新增"扫描线"签名效果：每个分区进入视口时有一道电光蓝扫描线掠过（呼应基因测序读数的意象）
- 视频、产品、学术资讯板块全部改为深色岩层基调，与首屏背景统一
- 字体改为 Noto Serif SC(粗衬线，碑刻质感) + JetBrains Mono(数据感等宽字体)组合，替换掉过于套路化的 Orbitron
- 产品卡片新增 3D 鼠标跟随倾斜效果 + 编号标签(01/02/03)
- 新增关键词跑马灯装饰带、首屏"向下滚动"提示、Logo 视差微动
- 首屏标题/徽标改为错落浮现的加载动画
This commit is contained in:
Claude
2026-07-14 08:01:36 +00:00
parent f347a99dd9
commit 75d8970e9a
3 changed files with 440 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+224 -68
View File
@@ -154,10 +154,10 @@ body {
}
.hero-content h1 {
font-family: 'Orbitron', 'Noto Sans SC', 'Segoe UI', sans-serif;
font-family: 'Noto Serif SC', 'Fraunces', serif;
font-size: 2.45rem;
font-weight: 700;
letter-spacing: 0.03em;
letter-spacing: 0.01em;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
@@ -193,10 +193,10 @@ body {
.hero-kicker {
display: inline-block;
font-family: 'Orbitron', 'Noto Sans SC', sans-serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.35em;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ice-blue-dim);
margin-bottom: 14px;
@@ -206,7 +206,7 @@ body {
color: var(--ice-blue);
margin-bottom: 0;
text-shadow: 0 0 30px rgba(56, 189, 248, 0.25);
font-family: 'Orbitron', 'Noto Sans SC', sans-serif;
font-family: 'Noto Serif SC', serif;
font-weight: 900;
letter-spacing: 0.02em;
}
@@ -302,75 +302,207 @@ body {
border-radius: 6px;
}
/* 产品预览部分 */
.products-preview {
padding: 80px 0;
background-color: var(--light-bg);
/* 向下滚动提示 */
.scroll-cue {
position: absolute;
left: 60px;
bottom: 26px;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
color: rgba(207, 232, 255, 0.65);
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.products-preview h2 {
.scroll-cue-line {
display: block;
width: 1px;
height: 34px;
background: linear-gradient(to bottom, rgba(207, 232, 255, 0.75), transparent);
animation: scrollCueMove 2.2s ease-in-out infinite;
}
@keyframes scrollCueMove {
0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; }
}
/* 关键词标记带 */
.marquee-strip {
background: var(--rock-navy-0);
border-top: 1px solid rgba(156, 198, 236, 0.12);
border-bottom: 1px solid rgba(156, 198, 236, 0.12);
overflow: hidden;
white-space: nowrap;
padding: 14px 0;
}
.marquee-track {
display: inline-flex;
align-items: center;
gap: 18px;
animation: marqueeScroll 26s linear infinite;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
letter-spacing: 0.08em;
color: var(--ice-blue-dim);
}
.marquee-track .dot {
color: var(--electric-blue);
opacity: 0.7;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
.scroll-cue-line {
animation: none;
}
}
/* 分区通用：扫描线签名效果 + 深色岩层底色 */
.reveal-section {
position: relative;
overflow: hidden;
}
.section-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--electric-blue), transparent);
box-shadow: 0 0 16px 2px rgba(56, 189, 248, 0.6);
pointer-events: none;
z-index: 5;
opacity: 0;
}
.section-heading {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
color: var(--primary-blue);
max-width: 640px;
margin: 0 auto 56px;
}
.section-heading .eyebrow {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--electric-blue);
margin-bottom: 14px;
}
.section-heading h2 {
font-family: 'Noto Serif SC', serif;
font-weight: 900;
font-size: 2.3rem;
color: var(--ice-blue);
letter-spacing: 0.02em;
}
/* 产品预览部分 —— 深色岩层卡片 */
.products-preview {
padding: 110px 0;
background:
radial-gradient(ellipse 60% 50% at 85% 0%, rgba(56, 189, 248, 0.06), transparent 60%),
linear-gradient(180deg, var(--rock-navy-0) 0%, var(--rock-navy-1) 100%);
}
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
perspective: 1200px;
}
.preview-card {
background: white;
padding: 22px;
position: relative;
background: linear-gradient(160deg, rgba(27, 44, 74, 0.55) 0%, rgba(10, 17, 32, 0.75) 100%);
padding: 30px 26px;
border-radius: 14px;
border: 1px solid rgba(156, 198, 236, 0.14);
backdrop-filter: blur(6px);
transition: border-color 0.3s, box-shadow 0.3s;
transform-style: preserve-3d;
will-change: transform;
}
.preview-card.is-tilting,
.preview-card:hover {
border-color: rgba(56, 189, 248, 0.45);
box-shadow: 0 20px 40px rgba(2, 6, 14, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.08);
}
.card-index {
position: absolute;
top: 22px;
right: 26px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
letter-spacing: 0.08em;
color: rgba(156, 198, 236, 0.45);
}
.preview-image-wrap {
background: rgba(5, 7, 12, 0.6);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
border-top: 4px solid var(--primary-purple);
margin-bottom: 20px;
overflow: hidden;
}
.preview-image {
width: 100%;
height: 150px;
object-fit: contain;
background: #f7f9fc;
border-radius: 8px;
margin-bottom: 18px;
}
.preview-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
display: block;
padding: 10px;
}
.preview-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary-blue);
font-family: 'Noto Serif SC', serif;
font-weight: 700;
font-size: 1.4rem;
margin-bottom: 12px;
color: var(--ice-blue);
}
.preview-card p {
color: var(--light-text);
color: rgba(207, 232, 255, 0.62);
margin-bottom: 20px;
font-size: 0.95rem;
}
.card-link {
color: var(--accent-color);
color: var(--electric-blue);
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.card-link:hover {
color: #00a8cc;
color: var(--ice-blue);
}
/* 学术与动态部分 */
/* 学术与动态部分 —— 深色双栏 */
.academic-news {
padding: 80px 0;
background: white;
padding: 110px 0;
background: var(--rock-navy-1);
}
.section-row {
@@ -379,53 +511,58 @@ body {
gap: 50px;
}
.section-col h2 {
font-size: 2rem;
margin-bottom: 30px;
color: var(--primary-purple);
border-bottom: 3px solid var(--accent-color);
.section-col h3 {
font-family: 'Noto Serif SC', serif;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 26px;
color: var(--ice-blue);
border-bottom: 1px solid rgba(156, 198, 236, 0.25);
padding-bottom: 15px;
}
.news-list {
display: flex;
flex-direction: column;
gap: 25px;
gap: 20px;
}
.news-item {
padding: 20px;
border-left: 4px solid var(--primary-blue);
background: var(--light-bg);
border-left: 2px solid var(--electric-blue);
background: rgba(255, 255, 255, 0.03);
border-radius: 5px;
transition: all 0.3s;
}
.news-item:hover {
background: #e8f1ff;
transform: translateX(10px);
background: rgba(56, 189, 248, 0.08);
transform: translateX(8px);
}
.news-item h4 {
margin-bottom: 8px;
color: var(--primary-blue);
color: var(--ice-blue);
font-weight: 600;
}
.news-item p {
font-size: 0.9rem;
color: var(--light-text);
color: rgba(207, 232, 255, 0.55);
margin-bottom: 10px;
}
.news-item a,
.read-more {
color: var(--accent-color);
color: var(--electric-blue);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s;
}
.news-item a:hover,
.read-more:hover {
color: #00a8cc;
color: var(--ice-blue);
}
/* 响应式设计 */
@@ -470,8 +607,9 @@ body {
height: 55%;
}
.products-preview h2 {
font-size: 2rem;
.products-preview h2,
.section-heading h2 {
font-size: 1.9rem;
}
.section-row {
@@ -482,6 +620,14 @@ body {
.preview-grid {
grid-template-columns: 1fr;
}
.scroll-cue {
left: 20px;
}
.marquee-track {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
@@ -517,45 +663,55 @@ body {
.home-video-section {
background: #f8fafc;
padding: 42px 20px;
border-bottom: 1px solid #e5ebf3;
background: var(--rock-navy-0);
padding: 100px 20px;
}
.home-video-layout {
display: grid;
grid-template-columns: minmax(260px, 0.75fr) 1.25fr;
gap: 28px;
gap: 40px;
align-items: center;
}
.home-video-copy h2 {
color: var(--primary-blue);
font-size: 1.75rem;
margin-bottom: 12px;
font-family: 'Noto Serif SC', serif;
font-weight: 700;
color: var(--ice-blue);
font-size: 1.9rem;
margin-bottom: 14px;
}
.home-video-copy p {
color: #34405a;
color: rgba(207, 232, 255, 0.62);
line-height: 1.8;
margin-bottom: 12px;
margin-bottom: 14px;
}
.section-kicker {
display: inline-block;
color: var(--accent-color);
font-family: 'JetBrains Mono', monospace;
color: var(--electric-blue);
font-weight: 700;
margin-bottom: 8px;
font-size: 0.9rem;
letter-spacing: 0.14em;
margin-bottom: 10px;
font-size: 0.85rem;
}
.home-video-media {
position: relative;
border-radius: 12px;
padding: 1px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(156, 198, 236, 0.08));
}
.home-video-layout video {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
background: #0f172a;
border-radius: 8px;
box-shadow: 0 14px 30px rgba(16, 41, 79, 0.16);
background: #05070c;
border-radius: 11px;
box-shadow: 0 20px 45px rgba(2, 6, 14, 0.55);
}
@media (max-width: 768px) {
index.html
+78 -28
View File
@@ -7,7 +7,7 @@
<title>海古纪生物科技 - 精准基因组学解决方案</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Noto+Sans+SC:wght@700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/footer.css">
@@ -102,12 +102,12 @@
<div class="hero-brand-heading">
<img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
<div class="hero-brand-copy">
<span class="hero-kicker">HYPER-GENE · 生命孪生体系</span>
<span class="hero-kicker" data-reveal-item>HYPER&#8209;GENE · 生命孪生体系</span>
<h1>
<span class="hero-line-1">突破极限</span>
<span class="hero-line-2">生命从此被计算</span>
<span class="hero-line-1" data-reveal-item>突破极限</span>
<span class="hero-line-2" data-reveal-item>生命从此被计算</span>
</h1>
<div class="hero-badge-row">
<div class="hero-badge-row" data-reveal-item>
<span class="hero-badge">极低成本</span>
<span class="hero-badge">高效</span>
<span class="hero-badge">灵活</span>
@@ -156,58 +156,104 @@
<button class="carousel-dot" data-slide="3" aria-label="查看第 3 张轮播"></button>
<button class="carousel-dot" data-slide="4" aria-label="查看第 4 张轮播"></button>
</div>
<div class="scroll-cue" aria-hidden="true">
<span>向下滚动 · 探索更多</span>
<i class="scroll-cue-line"></i>
</div>
</section>
<!-- 产品与服务预览 -->
<!-- 关键词标记带 -->
<div class="marquee-strip" aria-hidden="true">
<div class="marquee-track">
<span>极低成本</span><span class="dot">·</span>
<span>高效</span><span class="dot">·</span>
<span>灵活</span><span class="dot">·</span>
<span>高通量</span><span class="dot">·</span>
<span>HYPER&#8209;SEQ</span><span class="dot">·</span>
<span>生命孪生体系</span><span class="dot">·</span>
<span>精准基因组学</span><span class="dot">·</span>
<span>极低成本</span><span class="dot">·</span>
<span>高效</span><span class="dot">·</span>
<span>灵活</span><span class="dot">·</span>
<span>高通量</span><span class="dot">·</span>
<span>HYPER&#8209;SEQ</span><span class="dot">·</span>
<span>生命孪生体系</span><span class="dot">·</span>
<span>精准基因组学</span><span class="dot">·</span>
</div>
</div>
<!-- 首页视频 -->
<section class="home-video-section">
<section class="home-video-section reveal-section">
<span class="section-scan" aria-hidden="true"></span>
<div class="container home-video-layout">
<div class="home-video-copy">
<div class="home-video-copy reveal-up">
<span class="section-kicker">南繁科研现场</span>
<h2>海大南繁：走向世界的育种中心</h2>
<p>通过视频了解海南大学南繁科研与育种创新基础，感受海古纪技术服务所依托的南繁产业场景。</p>
<a class="card-link" href="pages/resources.html#video">更多视频 →</a>
</div>
<video controls preload="metadata" poster="公司资料/资讯/2025-2-12/水稻图片.png">
<source src="公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
您的浏览器暂不支持视频播放。
</video>
<div class="home-video-media reveal-up">
<video controls preload="metadata" poster="公司资料/资讯/2025-2-12/水稻图片.png">
<source src="公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
您的浏览器暂不支持视频播放。
</video>
</div>
</div>
</section>
<section class="products-preview">
<section class="products-preview reveal-section">
<span class="section-scan" aria-hidden="true"></span>
<div class="container">
<h2>我们的产品与服务</h2>
<div class="section-heading reveal-up">
<span class="eyebrow">产品与服务</span>
<h2>我们的产品与服务</h2>
</div>
<div class="preview-grid">
<div class="preview-card">
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
<article class="preview-card tilt-card reveal-up">
<span class="card-index">01</span>
<div class="preview-image-wrap">
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
</div>
<h3>AI生信科学家</h3>
<p>全自动、自规划的多组学分析智能体</p>
<a href="pages/products.html#ai-scientist" class="card-link">了解更多 →</a>
</div>
</article>
<div class="preview-card">
<img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
<article class="preview-card tilt-card reveal-up">
<span class="card-index">02</span>
<div class="preview-image-wrap">
<img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
</div>
<h3>Hyper-seq测序</h3>
<p>极低成本、高效、灵活的DNA测序文库制备</p>
<a href="pages/services.html#hyper-seq" class="card-link">了解更多 →</a>
</div>
</article>
<div class="preview-card">
<img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
<article class="preview-card tilt-card reveal-up">
<span class="card-index">03</span>
<div class="preview-image-wrap">
<img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
</div>
<h3>全基因组重测序</h3>
<p>高精度全基因组测序与分析服务</p>
<a href="pages/services.html#wgs" class="card-link">了解更多 →</a>
</div>
</article>
</div>
</div>
</section>
<!-- 学术文献与动态 -->
<section class="academic-news">
<section class="academic-news reveal-section">
<span class="section-scan" aria-hidden="true"></span>
<div class="container">
<div class="section-heading reveal-up">
<span class="eyebrow">知识与洞见</span>
<h2>学术文献与最新动态</h2>
</div>
<div class="section-row">
<div class="section-col">
<h2>学术文献</h2>
<div class="section-col reveal-up">
<h3>学术文献</h3>
<div class="news-list">
<div class="news-item">
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
@@ -226,8 +272,8 @@
</div>
</div>
<div class="section-col">
<h2>最新动态</h2>
<div class="section-col reveal-up">
<h3>最新动态</h3>
<div class="news-list">
<div class="news-item">
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
@@ -303,9 +349,13 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/nav.js"></script>
<script src="js/particles.js"></script>
<script src="js/animations.js"></script>
</body>
</html>
js/animations.js
+138
View File
@@ -0,0 +1,138 @@
/**
* 首页动效编排
* - Lenis 平滑滚动
* - GSAP ScrollTrigger 驱动的分区揭示、扫描线签名效果
* - 首屏加载时的标题错落浮现
* - 产品卡片的 3D 悬浮跟随
*/
(function () {
var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------- 1. Lenis 平滑滚动 ---------- */
var lenis = null;
if (window.Lenis && !prefersReducedMotion) {
lenis = new Lenis({
duration: 1.15,
easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
smoothWheel: true,
wheelMultiplier: 1
});
if (window.gsap && window.ScrollTrigger) {
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(function (time) {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
} else {
requestAnimationFrame(function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
});
}
}
/* ---------- 2. 首屏标题错落浮现 ---------- */
var revealItems = document.querySelectorAll('[data-reveal-item]');
if (window.gsap && revealItems.length) {
gsap.set(revealItems, { opacity: 0, y: 26 });
gsap.to(revealItems, {
opacity: 1,
y: 0,
duration: 0.9,
ease: 'power3.out',
stagger: 0.16,
delay: 0.3
});
}
if (!window.gsap || !window.ScrollTrigger) {
return; // 没有 GSAP 时，直接跳过滚动动效，保留静态可读的页面
}
gsap.registerPlugin(ScrollTrigger);
/* ---------- 3. 分区揭示 + 扫描线签名效果 ---------- */
document.querySelectorAll('.reveal-section').forEach(function (section) {
var revealTargets = section.querySelectorAll('.reveal-up');
var scanLine = section.querySelector('.section-scan');
if (revealTargets.length) {
gsap.set(revealTargets, { opacity: 0, y: 40 });
gsap.to(revealTargets, {
opacity: 1,
y: 0,
duration: 0.9,
ease: 'power3.out',
stagger: 0.14,
scrollTrigger: {
trigger: section,
start: 'top 78%',
once: true
}
});
}
if (scanLine) {
gsap.fromTo(scanLine,
{ top: '0%', opacity: 0.9 },
{
top: '100%',
opacity: 0,
duration: 1.1,
ease: 'power2.inOut',
scrollTrigger: {
trigger: section,
start: 'top 85%',
once: true
}
}
);
}
});
/* ---------- 4. 产品卡片 3D 悬浮跟随 ---------- */
document.querySelectorAll('.tilt-card').forEach(function (card) {
var bounds;
card.addEventListener('mouseenter', function () {
bounds = card.getBoundingClientRect();
card.classList.add('is-tilting');
});
card.addEventListener('mousemove', function (e) {
if (!bounds) bounds = card.getBoundingClientRect();
var px = (e.clientX - bounds.left) / bounds.width - 0.5;
var py = (e.clientY - bounds.top) / bounds.height - 0.5;
gsap.to(card, {
rotateX: py * -8,
rotateY: px * 10,
duration: 0.4,
ease: 'power2.out',
transformPerspective: 700
});
});
card.addEventListener('mouseleave', function () {
card.classList.remove('is-tilting');
gsap.to(card, { rotateX: 0, rotateY: 0, duration: 0.6, ease: 'power3.out' });
});
});
/* ---------- 5. Hero logo 视差微动 ---------- */
var heroLogo = document.querySelector('.hero-brand-logo');
var hero = document.querySelector('.hero');
if (heroLogo && hero && !prefersReducedMotion) {
hero.addEventListener('mousemove', function (e) {
var rect = hero.getBoundingClientRect();
var px = (e.clientX - rect.left) / rect.width - 0.5;
var py = (e.clientY - rect.top) / rect.height - 0.5;
gsap.to(heroLogo, {
x: px * 14,
y: py * 10,
duration: 0.6,
ease: 'power2.out'
});
});
}
})();