|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Contact & Global Grid - Nenghui</title>
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
<!-- AOS Animation Library -->
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
<!-- Tailwind & Config -->
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
<script id="tailwind-config">
|
|
|
tailwind.config = {
|
|
|
darkMode: "class",
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
"primary": "#13eca4",
|
|
|
"background-light": "#f8fcfa",
|
|
|
"background-dark": "#10221c",
|
|
|
"pearlescent": "#f0f7f5",
|
|
|
"silver-accent": "#e2e8f0",
|
|
|
"about-us": "#ff6b00"
|
|
|
},
|
|
|
fontFamily: {
|
|
|
"display": ["Montserrat", "sans-serif"],
|
|
|
"sans": ["Montserrat", "sans-serif"],
|
|
|
"mono": ["JetBrains Mono", "Montserrat"],
|
|
|
"inter": ["Inter", "Montserrat"],
|
|
|
},
|
|
|
borderRadius: {
|
|
|
"DEFAULT": "0.5rem",
|
|
|
"lg": "1rem",
|
|
|
"xl": "1.5rem",
|
|
|
"2xl": "2rem",
|
|
|
"3xl": "3rem",
|
|
|
"full": "9999px"
|
|
|
},
|
|
|
backgroundImage: {
|
|
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
|
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
|
|
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
|
|
|
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
|
|
|
|
|
|
},
|
|
|
boxShadow: {
|
|
|
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
|
|
|
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
|
|
|
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
|
|
|
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
|
|
|
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
|
|
|
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
|
},
|
|
|
keyframes: {
|
|
|
fadeIn: {
|
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
|
},
|
|
|
scan: {
|
|
|
'0%': { top: '-10%', opacity: '0' },
|
|
|
'10%': { opacity: '1' },
|
|
|
'90%': { opacity: '1' },
|
|
|
'100%': { top: '110%', opacity: '0' },
|
|
|
},
|
|
|
rotateGlobe: {
|
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
|
'100%': { transform: 'rotate(360deg)' },
|
|
|
},
|
|
|
dash: {
|
|
|
'0%': { strokeDashoffset: '1000' },
|
|
|
'100%': { strokeDashoffset: '0' },
|
|
|
},
|
|
|
globePulse: {
|
|
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
|
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
},
|
|
|
// 高级交互动画
|
|
|
pulseGlow: {
|
|
|
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
|
|
|
'100%': { textShadow: '0 0 30px #ff6b00' }
|
|
|
},
|
|
|
sweep: { '100%': { left: '200%' } },
|
|
|
cardFlip: {
|
|
|
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
|
|
|
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
|
|
|
},
|
|
|
floatY: {
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
'50%': { transform: 'translateY(-15px)' }
|
|
|
},
|
|
|
textShimmer: {
|
|
|
'0%': { backgroundPosition: '0% 50%' },
|
|
|
'100%': { backgroundPosition: '100% 50%' },
|
|
|
},
|
|
|
blobSpin: {
|
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
|
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
|
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
|
|
}
|
|
|
},
|
|
|
animation: {
|
|
|
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
|
|
'dash-flow': 'dash 3s linear infinite',
|
|
|
'globe-select': 'globePulse 0.8s ease-out',
|
|
|
'pulse-glow': 'pulseGlow 2s infinite alternate',
|
|
|
'sweep': 'sweep 3s infinite',
|
|
|
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
|
'float-1': 'floatY 3s ease-in-out infinite',
|
|
|
'float-2': 'floatY 3s ease-in-out infinite 1s',
|
|
|
'float-3': 'floatY 3s ease-in-out infinite 2s',
|
|
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
|
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<!-- Tailwind 基础样式注入 -->
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
|
@layer utilities {
|
|
|
/* contact us */
|
|
|
#contact-us .focus-group:hover > div:not(:hover) {
|
|
|
opacity: 0.6;
|
|
|
transform: scale(0.98);
|
|
|
filter: blur(2px);
|
|
|
}
|
|
|
#contact-us .focus-group > div {
|
|
|
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
|
|
|
}
|
|
|
|
|
|
/* about-us */
|
|
|
/* 新增：专门为副标题定制的 3D 荧光挤压动画 */
|
|
|
.text-3d-subtitle {
|
|
|
color: #ff6b00; /* 保持主题色 */
|
|
|
animation: pulse3d 2s infinite alternate;
|
|
|
}
|
|
|
|
|
|
@keyframes pulse3d {
|
|
|
0% {
|
|
|
text-shadow:
|
|
|
/* 左上高光 */
|
|
|
-1px -1px 0px rgba(255, 255, 255, 0.5),
|
|
|
/* 右下厚度 (深翠绿色系) */
|
|
|
1px 1px 0px #ce6c33,
|
|
|
2px 2px 0px #b44914,
|
|
|
3px 3px 0px #75600a,
|
|
|
/* 基础投影 */
|
|
|
4px 4px 10px rgba(0, 0, 0, 0.6),
|
|
|
/* 较弱的呼吸背光 */
|
|
|
0px 0px 10px rgba(224, 114, 12, 0.3);
|
|
|
}
|
|
|
100% {
|
|
|
text-shadow:
|
|
|
-1px -1px 0px rgba(255, 255, 255, 0.7),
|
|
|
1px 1px 0px #cc7e19,
|
|
|
2px 2px 0px #e2d921,
|
|
|
3px 3px 0px #692a05,
|
|
|
5px 5px 15px rgba(0, 0, 0, 0.8),
|
|
|
/* 较强的呼吸背光，模拟能量溢出 */
|
|
|
0px 0px 30px #f2e930,
|
|
|
0px 0px 50px rgba(195, 159, 16, 0.6);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text-3d {
|
|
|
text-shadow:
|
|
|
0 1px 0 #e2e8f0, /* 亮银色顶边 */
|
|
|
0 2px 0 #cbd5e1,
|
|
|
0 3px 0 #94a3b8,
|
|
|
0 4px 0 #64748b, /* 逐渐变暗模拟背光面 */
|
|
|
0 5px 0 #475569,
|
|
|
0 6px 0 #334155,
|
|
|
0 8px 10px rgba(0, 0, 0, 0.4), /* 近处接触阴影 */
|
|
|
0 15px 20px rgba(0, 0, 0, 0.3), /* 中距离扩散阴影 */
|
|
|
0 25px 40px rgba(0, 0, 0, 0.8); /* 远距离环境阴影 */
|
|
|
}
|
|
|
.text-3d-ultra {
|
|
|
color: #ffffff;
|
|
|
/* 1. 顶部左侧的亮色高光切割边 */
|
|
|
text-shadow:
|
|
|
-1px -1px 1px rgba(255, 255, 255, 0.3),
|
|
|
/* 2. 右下角 45度 斜向挤压厚度 (融入您的深墨绿环境色) */
|
|
|
1px 1px 0px #0d1e18,
|
|
|
2px 2px 0px #0a1813,
|
|
|
3px 3px 0px #08130e,
|
|
|
4px 4px 0px #060e0a,
|
|
|
5px 5px 0px #040906,
|
|
|
6px 6px 0px #020403,
|
|
|
7px 7px 0px #000000,
|
|
|
/* 3. 接触面的死黑投影 */
|
|
|
8px 8px 15px rgba(0, 0, 0, 0.8),
|
|
|
/* 4. 远距离大范围柔和投影 */
|
|
|
15px 15px 30px rgba(0, 0, 0, 0.6),
|
|
|
/* 5. 核心点睛之笔：在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */
|
|
|
-5px -5px 30px rgba(19, 236, 164, 0.1),
|
|
|
10px 10px 40px rgba(19, 236, 164, 0.25);
|
|
|
}
|
|
|
/* Tab 状态管控：选中时变为 primary 背景与深色字体 */
|
|
|
|
|
|
#tech-landing-wrapper .tab-content { @apply hidden; }
|
|
|
#tech-landing-wrapper .tab-content.active { @apply grid; }
|
|
|
}
|
|
|
</style>
|
|
|
<style>
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-[#fcfdfd] text-slate-800 font-sans overflow-x-hidden selection:bg-primary selection:text-white cursor-default">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
.text-mask-bg {
|
|
|
background-image: url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc4.avif');
|
|
|
background-size: cover; background-position: center; background-attachment: fixed;
|
|
|
-webkit-background-clip: text; color: transparent;
|
|
|
}
|
|
|
.acc-item { flex: 1; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
|
|
|
.acc-item:hover { flex: 2.5; }
|
|
|
.acc-img { opacity: 0; transform: scale(1.1); transition: opacity 0.6s ease, transform 0.8s ease; mix-blend-mode: multiply; }
|
|
|
.acc-item:hover .acc-img { opacity: 0.45; transform: scale(1); }
|
|
|
.img-reveal { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
|
.group:hover .img-reveal { transform: scale(1.05); }
|
|
|
::-webkit-scrollbar { display: none; }
|
|
|
|
|
|
/* 1. 呼吸环境光 (亮色版：使用纯白遮罩压暗背景图) */
|
|
|
.ambient-bg {
|
|
|
position: fixed; inset: 0; z-index: 0;
|
|
|
background-image: url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc5.avif');
|
|
|
background-size: cover; background-position: center;
|
|
|
opacity: 0.35; filter: grayscale(30%) blur(10px);
|
|
|
animation: breathe 30s infinite alternate ease-in-out;
|
|
|
will-change: transform;
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
.ambient-overlay {
|
|
|
position: fixed; inset: 0; z-index: 1;
|
|
|
background: linear-gradient(to bottom, rgba(252, 253, 253, 0.9), rgba(252, 253, 253, 0.98));
|
|
|
}
|
|
|
@keyframes breathe { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
|
|
|
|
|
|
/* 2. 生长连接线 (亮色版：加深颜色以增加对比度) */
|
|
|
.connector-wrap {
|
|
|
position: relative; width: 100%; height: 20vh;
|
|
|
display: flex; justify-content: center; z-index: 10;
|
|
|
}
|
|
|
.connector-line {
|
|
|
position: absolute; top: 0; width: 2px; height: 0%;
|
|
|
background: linear-gradient(to bottom, transparent, #0fa373 50%, #d95a00);
|
|
|
box-shadow: 0 5px 15px rgba(15, 163, 115, 0.2);
|
|
|
will-change: height;
|
|
|
}
|
|
|
.connector-dot {
|
|
|
position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%);
|
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
|
background: #ff6b00;
|
|
|
box-shadow: 0 0 15px 4px rgba(255, 107, 0, 0.4);
|
|
|
opacity: 0; transition: opacity 0.2s;
|
|
|
}
|
|
|
|
|
|
/* 3. 擦除文字样式 (亮色版巨变！) */
|
|
|
.scrub-container { position: relative; z-index: 20; padding: 10vh 0 20vh 0; }
|
|
|
|
|
|
.scrub-block {
|
|
|
min-height: 50vh; display: flex; flex-direction: column; justify-content: center;
|
|
|
max-w-[1000px]; margin: 0 auto; padding: 0 5%;
|
|
|
}
|
|
|
|
|
|
/* 单词弹起特效：未激活状态 */
|
|
|
.scrub-word {
|
|
|
display: inline-block; margin-right: 0.25em; margin-bottom: 0.1em;
|
|
|
/* 浅色背景下，未读文字用非常淡的灰色 */
|
|
|
color: rgba(148, 163, 184, 0.25);
|
|
|
transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
will-change: color, transform;
|
|
|
transform: translateY(8px) scale(0.98);
|
|
|
}
|
|
|
|
|
|
/* 单词弹起特效：已激活状态 (变为极黑/主题色，而不是发光) */
|
|
|
.scrub-word.highlighted {
|
|
|
color: #595959; /* slate-900 深黑 */
|
|
|
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 淡淡的投影，让字显得有厚度 */
|
|
|
transform: translateY(0) scale(1);
|
|
|
}
|
|
|
/* 品牌色词汇高亮 (加深以对抗白底) */
|
|
|
.scrub-word.highlighted-primary { color: #108c60; text-shadow: 0 4px 15px rgba(16, 140, 96, 0.2); transform: translateY(0) scale(1); }
|
|
|
.scrub-word.highlighted-orange { color: #d95a00; text-shadow: 0 4px 15px rgba(217, 90, 0, 0.2); transform: translateY(0) scale(1); }
|
|
|
.scrub-word.highlighted-slate { color: #475569; text-shadow: 0 4px 10px rgba(0,0,0,0.05); transform: translateY(0) scale(1); }
|
|
|
|
|
|
/* 4. 手写签名区定制 */
|
|
|
/* @import url('https://fonts.googleapis.com/css2?family=Betania+Patmos+GDL:wght@400;700&family=Dancing+Script:wght@500;700&display=swap'); */
|
|
|
|
|
|
.handwriting-font { font-family: 'Liu Jian Mao Cao', cursive; }
|
|
|
.handwriting-font-word {
|
|
|
/* font-family: 'Sacramento', cursive; */
|
|
|
}
|
|
|
|
|
|
.signature-path {
|
|
|
stroke-dasharray: 1000; stroke-dashoffset: 1000;
|
|
|
transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; /* 加0.5s延迟，等字亮完再画线 */
|
|
|
}
|
|
|
/* 当外层触发 AOS 动画时画线 */
|
|
|
.signature-reveal.aos-animate .signature-path { stroke-dashoffset: 0; }
|
|
|
/* 封面图极其缓慢的呼吸缩放 */
|
|
|
@keyframes breatheHero {
|
|
|
0% { transform: scale(1.05); }
|
|
|
100% { transform: scale(1.15); }
|
|
|
}
|
|
|
.animate-breathe-hero {
|
|
|
animation: breatheHero 20s infinite alternate ease-in-out;
|
|
|
will-change: transform;
|
|
|
}
|
|
|
|
|
|
/* 播放按钮的高级心跳波纹 */
|
|
|
@keyframes pingSlow {
|
|
|
0% { transform: scale(1); opacity: 0.8; }
|
|
|
100% { transform: scale(2); opacity: 0; }
|
|
|
}
|
|
|
.animate-ping-slow {
|
|
|
animation: pingSlow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 1. 首屏：全屏呼吸封面与视频触发区 -->
|
|
|
<!-- 1. 首屏：全屏呼吸封面与视频触发区 -->
|
|
|
<section class="h-[90vh] flex flex-col justify-center items-center relative z-20 px-6 overflow-hidden">
|
|
|
<!-- 视频封面背景 -->
|
|
|
<div class="absolute inset-0 z-0 overflow-hidden">
|
|
|
<div class="w-full h-full bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc4.avif')] bg-cover bg-center animate-breathe-hero scale-105"></div>
|
|
|
<div class="absolute inset-0 bg-white/40 backdrop-blur-[2px]"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative z-10 text-center flex flex-col items-center" data-aos="zoom-in" data-aos-duration="1500">
|
|
|
<span class="text-primary font-mono tracking-widest uppercase text-sm mb-6 block drop-shadow-md">Our Story</span>
|
|
|
<h1 class="text-4xl md:text-[2.66rem] text-slate-900 tracking-tighter mb-10 drop-shadow-lg">
|
|
|
Engineered<br/><span class="text-primary italic">Harmony.</span>
|
|
|
</h1>
|
|
|
|
|
|
<!-- 播放按钮组 -->
|
|
|
<div class="relative group cursor-pointer mt-4" id="play-video-btn">
|
|
|
<!-- 脉冲波纹 -->
|
|
|
<div class="absolute inset-0 bg-primary/30 rounded-full animate-ping-slow scale-50"></div>
|
|
|
<div class="absolute inset-0 bg-[#ff6b00]/20 rounded-full animate-ping-slow scale-25" style="animation-delay: 1s;"></div>
|
|
|
|
|
|
<!-- 实体按钮 -->
|
|
|
<div class="relative w-24 h-24 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center shadow-[0_15px_35px_rgba(0,0,0,0.15)] group-hover:scale-110 transition-transform duration-500 border border-slate-100">
|
|
|
<span class="material-symbols-outlined text-4xl md:text-5xl text-primary translate-x-1 group-hover:text-[#ff6b00] transition-colors"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-slate-600 font-mono tracking-widest uppercase mt-8 ">Watch the Film</p>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 2. 全屏视频弹窗 (响应式等比例) -->
|
|
|
<div id="video-modal" class="fixed inset-0 z-[99999] bg-black/95 backdrop-blur-xl opacity-0 pointer-events-none transition-opacity duration-500 flex items-center justify-center">
|
|
|
<!-- 关闭按钮 (移出视频框，固定在屏幕右上角，防止被视频遮挡) -->
|
|
|
<button id="close-video-btn" class="absolute top-6 right-6 md:top-10 md:right-10 w-12 h-12 md:w-16 md:h-16 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center text-white hover:text-black transition-all duration-300 z-50">
|
|
|
<span class="material-symbols-outlined text-2xl md:text-3xl"></span>
|
|
|
</button>
|
|
|
|
|
|
<!-- 视频容器: max-w 控制最大宽度, w-full 保证不溢出屏幕, aspect-video 强制 16:9 等比例缩放 -->
|
|
|
<div class="w-full max-w-[90vw] md:max-w-5xl lg:max-w-6xl px-4 md:px-0 relative transform scale-95 transition-transform duration-500 delay-100" id="video-container">
|
|
|
<div class="aspect-video bg-black rounded-xl md:rounded-2xl overflow-hidden shadow-2xl relative w-full flex items-center justify-center">
|
|
|
<!-- 真正的 HTML5 Video 标签 -->
|
|
|
<video
|
|
|
id="brand-video"
|
|
|
class="w-full h-full object-contain bg-black"
|
|
|
controls
|
|
|
playsinline
|
|
|
preload="none"
|
|
|
poster="https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc5.avif">
|
|
|
<source src="https://nenghui.com/wp-content/uploads/2026/03/888-SH-NHET-001-final-2026030620.mp4" type="video/mp4">
|
|
|
Your browser does not support the video tag.
|
|
|
</video>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 固定背景与亮色遮罩 -->
|
|
|
<div class="ambient-bg"></div>
|
|
|
<!-- <div class="ambient-overlay"></div> -->
|
|
|
<!-- 核心文字排版区 -->
|
|
|
|
|
|
<div class="scrub-container relative container mx-auto">
|
|
|
<!-- 🚀 序言：总裁寄语 (修改为适配浅色背景) -->
|
|
|
<div class="scrub-block text-center w-full max-w-4xl" style="min-height: 80vh;">
|
|
|
<span class="text-[#108c60] font-mono tracking-widest text-sm mb-10 block uppercase ">Prologue</span>
|
|
|
|
|
|
<!-- <h2 class="text-3xl md:text-5xl lg:text-6xl font-display leading-tight tracking-tighter mb-16 data-scrub-target">
|
|
|
<span data-color="slate">Wings of Evolution:</span> Our Journey from Roots to the Future.
|
|
|
</h2> -->
|
|
|
|
|
|
<div class="space-y-6 text-xl md:text-2xl font-light italic leading-relaxed text-left mx-auto max-w-2xl text-slate-800 handwriting-font-word">
|
|
|
<p class="data-scrub-target"><span data-color="orange">Nenghui</span> is radiant as an eagle—always evolving</p>
|
|
|
<p class="data-scrub-target md:pl-8"><span data-color="primary">Nenghui</span> began with deep roots in the Electric power industry</p>
|
|
|
<p class="data-scrub-target"><span data-color="orange">Nenghui</span> excels at Engineering and design</p>
|
|
|
<p class="data-scrub-target md:pl-12"><span data-color="primary">Nenghui</span> is now focused on clean energy</p>
|
|
|
<p class="data-scrub-target">We strive to offer Efficient, worthy products and services</p>
|
|
|
|
|
|
<div class="pt-8">
|
|
|
<p class="data-scrub-target ">Nenghui stands by our partners,</p>
|
|
|
<p class="data-scrub-target md:pl-6">side by side,</p>
|
|
|
<p class="data-scrub-target md:pl-12">hand in hand,</p>
|
|
|
<p class="data-scrub-target md:pl-16"><span data-color="orange">heart to heart.</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 手写签名区 (适配浅色) -->
|
|
|
<div class="mt-20 flex flex-col items-center justify-center signature-reveal" data-aos="fade-up" data-aos-offset="100">
|
|
|
<p class="text-slate-400 font-mono text-sm tracking-widest uppercase mb-4">------------ Always side by side</p>
|
|
|
<div class="relative inline-block text-center">
|
|
|
<span data-no-translation class="handwriting-font text-5xl md:text-7xl text-slate-900 relative z-10 tracking-wide">
|
|
|
罗传奎
|
|
|
</span>
|
|
|
<!-- 画线变成更深的绿色以在白底上显现 -->
|
|
|
<svg class="absolute bottom-[-5px] left-[-10%] w-[120%] h-6 z-0 pointer-events-none" viewBox="0 0 200 20" preserveAspectRatio="none">
|
|
|
<path class="signature-path" d="M 5,15 Q 50,-5 195,15" fill="transparent" stroke="#108c60" stroke-width="2.5" stroke-linecap="round"/>
|
|
|
</svg>
|
|
|
</div>
|
|
|
<p class="text-slate-500 font-mono text-xs uppercase tracking-widest mt-6 ">Chairman of the Board</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="connector-wrap"><div class="connector-line"><div class="connector-dot"></div></div></div>
|
|
|
<!-- 区块 1: 使命 -->
|
|
|
<div class="scrub-block text-left md:pr-[15%]">
|
|
|
<span class="text-[#108c60] font-mono tracking-widest text-sm mb-8 block uppercase ">The Mission</span>
|
|
|
<h2 class="text-4xl md:text-[2.66rem] leading-[1.8] leading-tight tracking-tight data-scrub-target">
|
|
|
We exist to bridge the gap between today’s energy needs and tomorrow’s green reality, delivering intelligent, reliable, and life-changing power solutions to the global community.
|
|
|
|
|
|
<!-- To democratize clean energy for global industries. We turn dormant commercial assets into powerful engines of sustainability, making the <span data-color="primary">zero-carbon transition</span> an effortless and highly profitable upgrade. -->
|
|
|
</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="connector-wrap"><div class="connector-line"><div class="connector-dot"></div></div></div>
|
|
|
|
|
|
<!-- 区块 2: 愿景 -->
|
|
|
<div class="scrub-block text-right md:pl-[15%]">
|
|
|
<span class="text-[#d95a00] font-mono tracking-widest text-sm mb-8 block uppercase ">The Vision</span>
|
|
|
<h2 class=" leading-[1.8] text-4xl md:text-[2.66rem] leading-tight tracking-tight data-scrub-target">
|
|
|
To power a world where sustainable energy flows without borders, enriching every life it touches.
|
|
|
</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="connector-wrap"><div class="connector-line"><div class="connector-dot"></div></div></div>
|
|
|
|
|
|
<!-- 区块 3: 价值观 1 -->
|
|
|
<div class="scrub-block text-left md:pr-[15%]">
|
|
|
<span class="text-slate-400 font-mono tracking-widest text-sm mb-8 block uppercase ">The Values</span>
|
|
|
<h2 class="leading-[1.8] text-4xl md:text-[2.66rem] leading-tight tracking-tight data-scrub-target">
|
|
|
Empathy in Innovation · Global Responsibility · Trust-Based Partnership · Stewardship of the Planet.
|
|
|
<!-- <span data-color="primary">Obsessive Rigor.</span> From blueprint to grid sync, our engineering is uncompromising, ensuring absolute safety and peak energy yield. -->
|
|
|
</h2>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 3. 价值观 (极简手风琴伸缩) -->
|
|
|
<section class="mt-10 py-20 bg-[#f4f7f6]">
|
|
|
<div class="container mx-auto px-6">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-slate-900 mb-16 text-center" data-aos="fade-up">What Drives Us</h2>
|
|
|
<div class="flex flex-col md:flex-row h-auto md:h-[500px] gap-4" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
|
|
<div class="acc-item relative rounded-[2rem] bg-white border border-slate-200 p-10 overflow-hidden group cursor-default shadow-sm hover:shadow-xl">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store01.jpg')] bg-cover bg-center acc-img pointer-events-none"></div>
|
|
|
<div class="relative z-10 flex flex-col h-full">
|
|
|
<span class="material-symbols-outlined text-4xl text-primary mb-6"></span>
|
|
|
<h3 class="text-3xl text-slate-900 mb-4">A Vision for a Net-Zero World</h3>
|
|
|
<p class="text-slate-600 mt-auto leading-relaxed">We are driven by the urgency of decarbonization, delivering smarter, cleaner energy solutions to empower sustainable communities across the globe.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="acc-item relative rounded-[2rem] bg-white border border-slate-200 p-10 overflow-hidden group cursor-default shadow-sm hover:shadow-xl">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store02.jpg')] bg-cover bg-center acc-img pointer-events-none"></div>
|
|
|
<div class="relative z-10 flex flex-col h-full">
|
|
|
<span class="material-symbols-outlined text-4xl text-[#ff6b00] mb-6"></span>
|
|
|
<h3 class="text-3xl text-slate-900 mb-4">Innovation Beyond Boundaries</h3>
|
|
|
<p class="text-slate-600 mt-auto leading-relaxed">From high-efficiency PV and energy storage to revolutionary heavy-truck swapping AGVs, we redefine what’s possible in the modern energy landscape.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="acc-item relative rounded-[2rem] bg-white border border-slate-200 p-10 overflow-hidden group cursor-default shadow-sm hover:shadow-xl">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store03.png')] bg-cover bg-center acc-img pointer-events-none"></div>
|
|
|
<div class="relative z-10 flex flex-col h-full">
|
|
|
<span class="material-symbols-outlined text-4xl text-blue-500 mb-6"></span>
|
|
|
<h3 class="text-3xl text-slate-900 mb-4">Excellence Through Partnership</h3>
|
|
|
<p class="text-slate-600 mt-auto leading-relaxed">With deep roots in EPC and technical services, we build bankable, long-term value for our partners from Europe to Southeast Asia and beyond.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<!-- 4. 发展史 (悬浮图文视差) -->
|
|
|
<!-- 4. 发展史 (宽银幕视差版 - 长文案升级) -->
|
|
|
<section class="py-40 bg-[#fff] relative z-20 overflow-hidden">
|
|
|
<div class="container mx-auto px-6">
|
|
|
<div class="text-center mb-32" data-aos="fade-up">
|
|
|
<span class="text-slate-400 font-mono tracking-widest uppercase text-sm mb-4 block">The Journey</span>
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-slate-900">Milestones of Nenghui.</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="max-w-6xl mx-auto space-y-40">
|
|
|
|
|
|
<!-- 2009: The Genesis -->
|
|
|
<div class="flex flex-col md:flex-row items-center gap-16 group relative" data-aos="fade-up">
|
|
|
<div class="absolute -top-16 left-0 text-[10rem] md:text-[15rem] font-display font-black text-slate-900 opacity-5 pointer-events-none z-[11] transition-transform group-hover:-translate-y-4 duration-700">2009</div>
|
|
|
<div class="w-full md:w-5/12 text-left md:text-right relative z-10 pt-10">
|
|
|
<span class="text-primary font-mono text-2xl mb-2 block">2009</span>
|
|
|
<h4 class="text-3xl text-slate-900 mb-6">The Genesis of Innovation</h4>
|
|
|
<p class="text-sm text-slate-500 leading-[2] font-light">Founded by visionary alumni from Tsinghua University and Shanghai Jiao Tong University, Nenghui was established with a mission to redefine energy. This year marked our strategic pivot into the Renewable Energy sector, laying the foundation for a sustainable global future.</p>
|
|
|
</div>
|
|
|
<div class="w-full md:w-7/12 rounded-[2.5rem] overflow-hidden aspect-[4/3] relative shadow-xl z-10">
|
|
|
<!-- 象征起源/初升太阳的光伏图 -->
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc4.avif')] bg-cover bg-center img-reveal"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2012: Accelerating -->
|
|
|
<div class="flex flex-col md:flex-row-reverse items-center gap-16 group relative" data-aos="fade-up">
|
|
|
<div class="absolute -top-16 right-0 text-[10rem] md:text-[15rem] font-display font-black text-slate-900 opacity-5 pointer-events-none z-[11] transition-transform group-hover:-translate-y-4 duration-700">2012</div>
|
|
|
<div class="w-full md:w-5/12 text-left relative z-10 pt-10">
|
|
|
<span class="text-[#ff6b00] font-mono text-2xl mb-2 block">2012</span>
|
|
|
<h4 class="text-3xl text-slate-900 mb-6">Accelerating the Transition</h4>
|
|
|
<p class="text-sm text-slate-500 leading-[2] font-light">This was a year of breakthroughs. By powering the National "Golden Sun" projects, Nenghui proved its technical prowess on the grandest stage. We transformed our corporate structure to empower our people through equity incentives and welcomed strategic partners to our board. This synergy triggered an unprecedented 500% growth rate, officially establishing Nenghui as a high-growth leader.</p>
|
|
|
</div>
|
|
|
<div class="w-full md:w-7/12 rounded-[2.5rem] overflow-hidden aspect-[4/3] relative shadow-xl z-10">
|
|
|
<!-- 象征高速增长/巨大工程阵列的图片 -->
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store05.jpg')] bg-cover bg-center img-reveal"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2017: Empowering -->
|
|
|
<div class="flex flex-col md:flex-row items-center gap-16 group relative" data-aos="fade-up">
|
|
|
<div class="absolute -top-16 left-0 text-[10rem] md:text-[15rem] font-display font-black text-slate-900 opacity-5 pointer-events-none z-[11] transition-transform group-hover:-translate-y-4 duration-700">2017</div>
|
|
|
<div class="w-full md:w-5/12 text-left md:text-right relative z-10 pt-10">
|
|
|
<span class="text-primary font-mono text-2xl mb-2 block">2017</span>
|
|
|
<h4 class="text-3xl text-slate-900 mb-6">Empowering Through Intelligence</h4>
|
|
|
<p class="text-sm text-slate-500 leading-[2] font-light">This year, Nenghui redefined efficiency by introducing our Smart O&M Platform, bringing digital precision to renewable energy. Our commitment to high-quality assets saw our self-operated solar portfolio soar to 50MW, eventually crossing the landmark of 100 million kWh in total energy output. We aren't just building plants; we are powering a smarter world.</p>
|
|
|
</div>
|
|
|
<div class="w-full md:w-7/12 rounded-[2.5rem] overflow-hidden aspect-[4/3] relative shadow-xl z-10">
|
|
|
<!-- 象征智能调度/数据平台的工业控制中心或发光线路图 -->
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store06.jpg')] bg-cover bg-center img-reveal"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2021: IPO & Energy Storage -->
|
|
|
<div class="flex flex-col md:flex-row-reverse items-center gap-16 group relative" data-aos="fade-up">
|
|
|
<div class="absolute -top-16 right-0 text-[10rem] md:text-[15rem] font-display font-black text-slate-900 opacity-5 pointer-events-none z-[11] transition-transform group-hover:-translate-y-4 duration-700">2021</div>
|
|
|
<div class="w-full md:w-5/12 text-left relative z-10 pt-10">
|
|
|
<span class="text-[#ff6b00] font-mono text-2xl mb-2 block">2021</span>
|
|
|
<h4 class="text-3xl text-slate-900 mb-6">A Landmark Year of Growth</h4>
|
|
|
<p class="text-sm text-slate-500 leading-[2] font-light">Nenghui reached a historic milestone with our IPO on the Shenzhen Stock Exchange(STOCK CODE:301046.SZ), fueling our global expansion. We expanded our technological frontier into Energy Storage, while solidifying a unique "Four-in-One" business model. This synergy of R&D, smart manufacturing, technical expertise, and strategic investment ensures our sustained leadership.</p>
|
|
|
</div>
|
|
|
<div class="w-full md:w-7/12 rounded-[2.5rem] overflow-hidden aspect-[4/3] relative shadow-xl z-10">
|
|
|
<!-- 象征金融/扩张/储能集装箱的高级感图片 -->
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store07.jpg')] bg-cover bg-center img-reveal"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2022: Scaling New Horizons -->
|
|
|
<div class="flex flex-col md:flex-row items-center gap-16 group relative" data-aos="fade-up">
|
|
|
<div class="absolute -top-16 left-0 text-[10rem] md:text-[15rem] font-display font-black text-slate-900 opacity-5 pointer-events-none z-[11] transition-transform group-hover:-translate-y-4 duration-700">2022</div>
|
|
|
<div class="w-full md:w-5/12 text-left md:text-right relative z-10 pt-10">
|
|
|
<span class="text-primary font-mono text-2xl mb-2 block">2022</span>
|
|
|
<h4 class="text-3xl text-slate-900 mb-6">Scaling New Horizons</h4>
|
|
|
<p class="text-sm text-slate-500 leading-[2] leading-relaxed font-light">Nenghui Tech accelerated its mission on two fronts. Our Residential and C&I Solar business reached new heights, supported by our innovative PV Cloud Platform. Simultaneously, we entered the "Fast Lane" of green transportation by releasing the First-of-its-kind Trackless Battery Swapping AGV. These achievements solidified our reputation as a pioneer in integrated energy solutions.</p>
|
|
|
</div>
|
|
|
<div class="w-full md:w-7/12 rounded-[2.5rem] overflow-hidden aspect-[4/3] relative shadow-xl z-10">
|
|
|
<!-- 象征创新/自动化制造/云平台的未来感图片 -->
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/store08.jpg')] bg-cover bg-center img-reveal"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- AOS -->
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
/* ==========================================
|
|
|
|
|
|
========================================== */
|
|
|
const playBtn = document.getElementById('play-video-btn');
|
|
|
const closeBtn = document.getElementById('close-video-btn');
|
|
|
const videoModal = document.getElementById('video-modal');
|
|
|
const videoContainer = document.getElementById('video-container');
|
|
|
const brandVideo = document.getElementById('brand-video'); // 获取原生的 video 元素
|
|
|
|
|
|
if (playBtn && closeBtn && videoModal) {
|
|
|
// 打开弹窗
|
|
|
playBtn.addEventListener('click', () => {
|
|
|
videoModal.classList.remove('opacity-0', 'pointer-events-none');
|
|
|
videoModal.classList.add('opacity-100', 'pointer-events-auto');
|
|
|
|
|
|
// 容器放大特效
|
|
|
setTimeout(() => {
|
|
|
videoContainer.classList.remove('scale-95');
|
|
|
videoContainer.classList.add('scale-100');
|
|
|
}, 50);
|
|
|
|
|
|
// 弹窗打开后，稍微延迟一下触发自动播放，体验更佳
|
|
|
if(brandVideo) {
|
|
|
setTimeout(() => {
|
|
|
brandVideo.play();
|
|
|
}, 400);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
//
|
|
|
const closeModal = () => {
|
|
|
videoModal.classList.remove('opacity-100', 'pointer-events-auto');
|
|
|
videoModal.classList.add('opacity-0', 'pointer-events-none');
|
|
|
videoContainer.classList.remove('scale-100');
|
|
|
videoContainer.classList.add('scale-95');
|
|
|
|
|
|
if(brandVideo) {
|
|
|
// 1. 暂停视频
|
|
|
brandVideo.pause();
|
|
|
// 2. 将视频进度归零（下次打开又从头看）
|
|
|
brandVideo.currentTime = 0;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
|
|
// （不点到视频本身）
|
|
|
videoModal.addEventListener('click', (e) => {
|
|
|
if(e.target === videoModal || e.target === videoContainer) closeModal();
|
|
|
});
|
|
|
|
|
|
//
|
|
|
document.addEventListener('keydown', (e) => {
|
|
|
if (e.key === 'Escape' && videoModal.classList.contains('opacity-100')) {
|
|
|
closeModal();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(typeof AOS !== 'undefined') AOS.init({ duration: 1000, once: true });
|
|
|
|
|
|
// 1. 文字切分逻辑
|
|
|
const targets = document.querySelectorAll('.data-scrub-target');
|
|
|
let allWords = [];
|
|
|
|
|
|
targets.forEach(target => {
|
|
|
const childNodes = Array.from(target.childNodes);
|
|
|
target.innerHTML = '';
|
|
|
childNodes.forEach(node => {
|
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
|
const words = node.textContent.split(/\s+/).filter(w => w.trim().length > 0);
|
|
|
words.forEach(word => {
|
|
|
const span = document.createElement('span');
|
|
|
span.className = 'scrub-word';
|
|
|
span.textContent = word + ' ';
|
|
|
target.appendChild(span);
|
|
|
allWords.push(span);
|
|
|
});
|
|
|
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
|
const specificColor = node.getAttribute('data-color');
|
|
|
const words = node.textContent.split(/\s+/).filter(w => w.trim().length > 0);
|
|
|
words.forEach(word => {
|
|
|
const span = document.createElement('span');
|
|
|
span.className = 'scrub-word';
|
|
|
if(specificColor === 'primary') span.dataset.highlightClass = 'highlighted-primary';
|
|
|
else if(specificColor === 'orange') span.dataset.highlightClass = 'highlighted-orange';
|
|
|
else if(specificColor === 'slate') span.dataset.highlightClass = 'highlighted'; // 默认变成深灰
|
|
|
span.textContent = word + ' ';
|
|
|
target.appendChild(span);
|
|
|
allWords.push(span);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 获取元素
|
|
|
const connectors = document.querySelectorAll('.connector-wrap');
|
|
|
// 将触发线定义在屏幕高度的 45% (视线聚焦处)
|
|
|
const textTriggerLineY = window.innerHeight * 0.75;
|
|
|
|
|
|
// 2. 统一滚动引擎
|
|
|
const handleScroll = () => {
|
|
|
const windowHeight = window.innerHeight;
|
|
|
|
|
|
// 【A】处理文字的点亮与弹起
|
|
|
allWords.forEach(word => {
|
|
|
const wordRect = word.getBoundingClientRect();
|
|
|
const wordCenterY = wordRect.top + (wordRect.height / 2);
|
|
|
|
|
|
if (wordCenterY < textTriggerLineY) {
|
|
|
const highlightClass = word.dataset.highlightClass || 'highlighted';
|
|
|
word.classList.add(highlightClass);
|
|
|
} else {
|
|
|
const highlightClass = word.dataset.highlightClass || 'highlighted';
|
|
|
word.classList.remove(highlightClass);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 【B】处理区块间短线的物理生长
|
|
|
connectors.forEach(wrap => {
|
|
|
const rect = wrap.getBoundingClientRect();
|
|
|
const line = wrap.querySelector('.connector-line');
|
|
|
const dot = wrap.querySelector('.connector-dot');
|
|
|
|
|
|
// 线条提前开始生长 (屏幕 65% 位置)，在屏幕 40% 位置生长满
|
|
|
const startTrigger = windowHeight * 0.65;
|
|
|
const endTrigger = windowHeight * 0.40;
|
|
|
|
|
|
let progress = 0;
|
|
|
if (rect.top < endTrigger) {
|
|
|
progress = 1;
|
|
|
}
|
|
|
else if (rect.top <= startTrigger ) {
|
|
|
if ( rect.bottom >= endTrigger) {
|
|
|
progress = (startTrigger - rect.top) / (startTrigger - endTrigger);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
progress = Math.max(0, Math.min(1, progress));
|
|
|
line.style.height = `${progress * 100}%`;
|
|
|
|
|
|
// 控制底部发光圆点的显示/隐藏
|
|
|
if (progress > 0.05) {
|
|
|
dot.style.opacity = '1';
|
|
|
} else {
|
|
|
dot.style.opacity = '0';
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
let ticking = false;
|
|
|
window.addEventListener('scroll', () => {
|
|
|
if (!ticking) {
|
|
|
window.requestAnimationFrame(() => {
|
|
|
handleScroll();
|
|
|
ticking = false;
|
|
|
});
|
|
|
ticking = true;
|
|
|
}
|
|
|
}, { passive: true });
|
|
|
|
|
|
handleScroll(); //
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
