1050 lines
43 KiB
JavaScript
1050 lines
43 KiB
JavaScript
|
// 财经商贸简历 - 增强版交互脚本
|
|||
|
|
|
|||
|
|
// 注册GSAP插件
|
|||
|
|
gsap.registerPlugin(ScrollTrigger, TextPlugin);
|
|||
|
|
|
|||
|
|
// 全局变量 - 鼠标相关变量已删除
|
|||
|
|
|
|||
|
|
// 页面加载完成后初始化
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
// 初始化所有功能
|
|||
|
|
initLoader();
|
|||
|
|
initParticles();
|
|||
|
|
initTypedText();
|
|||
|
|
initCountUp();
|
|||
|
|
initGSAPAnimations();
|
|||
|
|
initScrollTriggers();
|
|||
|
|
initChartAnimations();
|
|||
|
|
initProjectCards3D();
|
|||
|
|
initMagneticButtons();
|
|||
|
|
initSmoothScroll();
|
|||
|
|
initParallax();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 1. 增强版加载动画 - 优化速度
|
|||
|
|
function initLoader() {
|
|||
|
|
const loader = document.getElementById('loader');
|
|||
|
|
|
|||
|
|
// 立即显示英雄页内容，不等待加载动画
|
|||
|
|
playIntroAnimations();
|
|||
|
|
|
|||
|
|
// GSAP加载动画 - 缩短时间
|
|||
|
|
const tl = gsap.timeline({
|
|||
|
|
onComplete: () => {
|
|||
|
|
gsap.to(loader, {
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.3,
|
|||
|
|
onComplete: () => {
|
|||
|
|
loader.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 加载条动画 - 更快
|
|||
|
|
tl.to('.bar', {
|
|||
|
|
height: '100%',
|
|||
|
|
stagger: 0.05,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.inOut'
|
|||
|
|
})
|
|||
|
|
.to('.trend-line', {
|
|||
|
|
width: '100%',
|
|||
|
|
duration: 0.4,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
}, '-=0.2');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. 粒子背景
|
|||
|
|
function initParticles() {
|
|||
|
|
if (typeof particlesJS !== 'undefined') {
|
|||
|
|
particlesJS('particles-js', {
|
|||
|
|
particles: {
|
|||
|
|
number: {
|
|||
|
|
value: 80,
|
|||
|
|
density: {
|
|||
|
|
enable: true,
|
|||
|
|
value_area: 800
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
value: ['#FFD700', '#2563eb', '#10b981']
|
|||
|
|
},
|
|||
|
|
shape: {
|
|||
|
|
type: 'circle'
|
|||
|
|
},
|
|||
|
|
opacity: {
|
|||
|
|
value: 0.5,
|
|||
|
|
random: true,
|
|||
|
|
anim: {
|
|||
|
|
enable: true,
|
|||
|
|
speed: 1,
|
|||
|
|
opacity_min: 0.1,
|
|||
|
|
sync: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
size: {
|
|||
|
|
value: 3,
|
|||
|
|
random: true,
|
|||
|
|
anim: {
|
|||
|
|
enable: true,
|
|||
|
|
speed: 2,
|
|||
|
|
size_min: 0.1,
|
|||
|
|
sync: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
line_linked: {
|
|||
|
|
enable: true,
|
|||
|
|
distance: 150,
|
|||
|
|
color: '#FFD700',
|
|||
|
|
opacity: 0.2,
|
|||
|
|
width: 1
|
|||
|
|
},
|
|||
|
|
move: {
|
|||
|
|
enable: true,
|
|||
|
|
speed: 1,
|
|||
|
|
direction: 'none',
|
|||
|
|
random: false,
|
|||
|
|
straight: false,
|
|||
|
|
out_mode: 'out',
|
|||
|
|
bounce: false,
|
|||
|
|
attract: {
|
|||
|
|
enable: true,
|
|||
|
|
rotateX: 600,
|
|||
|
|
rotateY: 1200
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
interactivity: {
|
|||
|
|
detect_on: 'canvas',
|
|||
|
|
events: {
|
|||
|
|
onhover: {
|
|||
|
|
enable: true,
|
|||
|
|
mode: 'grab'
|
|||
|
|
},
|
|||
|
|
onclick: {
|
|||
|
|
enable: true,
|
|||
|
|
mode: 'push'
|
|||
|
|
},
|
|||
|
|
resize: true
|
|||
|
|
},
|
|||
|
|
modes: {
|
|||
|
|
grab: {
|
|||
|
|
distance: 140,
|
|||
|
|
line_linked: {
|
|||
|
|
opacity: 0.5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
push: {
|
|||
|
|
particles_nb: 4
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
retina_detect: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 鼠标跟随效果 - 已删除
|
|||
|
|
|
|||
|
|
// 4. 打字机效果
|
|||
|
|
function initTypedText() {
|
|||
|
|
if (typeof Typed !== 'undefined') {
|
|||
|
|
// 副标题打字机
|
|||
|
|
new Typed('#typed-subtitle', {
|
|||
|
|
strings: [
|
|||
|
|
'精通Amazon、Shopify、TikTok Shop多平台运营',
|
|||
|
|
'数据驱动选品，精准把握市场趋势',
|
|||
|
|
'优化Listing提升转化，打造爆款产品',
|
|||
|
|
'跨境物流供应链管理，确保履约时效'
|
|||
|
|
],
|
|||
|
|
typeSpeed: 50,
|
|||
|
|
backSpeed: 30,
|
|||
|
|
backDelay: 2000,
|
|||
|
|
loop: true,
|
|||
|
|
showCursor: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 5. 数字滚动动画
|
|||
|
|
function initCountUp() {
|
|||
|
|
const observerOptions = {
|
|||
|
|
threshold: 0.5,
|
|||
|
|
rootMargin: '0px'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const observer = new IntersectionObserver((entries) => {
|
|||
|
|
entries.forEach(entry => {
|
|||
|
|
if (entry.isIntersecting) {
|
|||
|
|
const numbers = entry.target.querySelectorAll('.stat-number');
|
|||
|
|
|
|||
|
|
numbers.forEach(num => {
|
|||
|
|
const count = parseFloat(num.getAttribute('data-count'));
|
|||
|
|
const prefix = num.getAttribute('data-prefix') || '';
|
|||
|
|
const suffix = num.getAttribute('data-suffix') || '';
|
|||
|
|
|
|||
|
|
if (typeof CountUp !== 'undefined') {
|
|||
|
|
const counter = new CountUp(num, count, {
|
|||
|
|
duration: 2.5,
|
|||
|
|
prefix: prefix,
|
|||
|
|
suffix: suffix,
|
|||
|
|
enableScrollSpy: false
|
|||
|
|
});
|
|||
|
|
counter.start();
|
|||
|
|
} else {
|
|||
|
|
// 备用动画
|
|||
|
|
let current = 0;
|
|||
|
|
const increment = count / 50;
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
current += increment;
|
|||
|
|
if (current >= count) {
|
|||
|
|
current = count;
|
|||
|
|
clearInterval(timer);
|
|||
|
|
}
|
|||
|
|
num.textContent = prefix + Math.floor(current) + suffix;
|
|||
|
|
}, 30);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
observer.unobserve(entry.target);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, observerOptions);
|
|||
|
|
|
|||
|
|
const statsContainer = document.querySelector('.stats-container');
|
|||
|
|
if (statsContainer) {
|
|||
|
|
observer.observe(statsContainer);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 6. GSAP动画 - 优化速度
|
|||
|
|
function initGSAPAnimations() {
|
|||
|
|
// 注释掉GSAP标题动画，使用CSS动画替代
|
|||
|
|
// 标题现在使用内联CSS动画，不需要JS控制
|
|||
|
|
|
|||
|
|
// 徽章动画 - 更快
|
|||
|
|
gsap.from('.hero-badge', {
|
|||
|
|
scale: 0,
|
|||
|
|
rotation: 360,
|
|||
|
|
duration: 0.6,
|
|||
|
|
ease: 'back.out(1.7)',
|
|||
|
|
delay: 0.1
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 按钮动画 - 更快
|
|||
|
|
gsap.from('.hero-cta .btn-primary, .hero-cta .btn-secondary', {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.4,
|
|||
|
|
stagger: 0.1,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
delay: 0.4
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 7. 滚动触发动画
|
|||
|
|
function initScrollTriggers() {
|
|||
|
|
// 章节标题动画
|
|||
|
|
gsap.utils.toArray('.section-title').forEach(title => {
|
|||
|
|
gsap.from(title, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: title,
|
|||
|
|
start: 'top 80%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
y: 50,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1,
|
|||
|
|
ease: 'power3.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 技能卡片动画 - 优化速度
|
|||
|
|
gsap.utils.toArray('.skill-card').forEach((card, index) => {
|
|||
|
|
gsap.from(card, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: card,
|
|||
|
|
start: 'top 85%',
|
|||
|
|
once: true // 只执行一次动画
|
|||
|
|
},
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.4,
|
|||
|
|
delay: index * 0.02, // 大幅减少延迟
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 项目卡片动画
|
|||
|
|
gsap.utils.toArray('.project-card').forEach((card, index) => {
|
|||
|
|
gsap.from(card, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: card,
|
|||
|
|
start: 'top 80%'
|
|||
|
|
},
|
|||
|
|
scale: 0.8,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
delay: index * 0.1,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 时间线动画
|
|||
|
|
gsap.utils.toArray('.timeline-item').forEach((item, index) => {
|
|||
|
|
const direction = index % 2 === 0 ? -100 : 100;
|
|||
|
|
gsap.from(item, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: item,
|
|||
|
|
start: 'top 80%'
|
|||
|
|
},
|
|||
|
|
x: direction,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 8. 图表动画
|
|||
|
|
function initChartAnimations() {
|
|||
|
|
// K线图动画
|
|||
|
|
const chartBg = document.getElementById('chartBg');
|
|||
|
|
if (chartBg) {
|
|||
|
|
// 动态创建K线
|
|||
|
|
for (let i = 0; i < 30; i++) {
|
|||
|
|
const bar = document.createElement('div');
|
|||
|
|
bar.className = 'chart-line';
|
|||
|
|
bar.style.left = (i * 3.3) + '%';
|
|||
|
|
bar.style.height = Math.random() * 60 + 20 + '%';
|
|||
|
|
bar.style.background = Math.random() > 0.5 ? '#10b981' : '#ef4444';
|
|||
|
|
bar.style.animationDelay = (i * 0.1) + 's';
|
|||
|
|
chartBg.appendChild(bar);
|
|||
|
|
|
|||
|
|
// GSAP动画
|
|||
|
|
gsap.from(bar, {
|
|||
|
|
height: 0,
|
|||
|
|
duration: 1,
|
|||
|
|
delay: i * 0.05,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3D金融正方体交互增强
|
|||
|
|
const financeCube = document.querySelector('.finance-cube');
|
|||
|
|
if (financeCube) {
|
|||
|
|
let currentRotationX = -20;
|
|||
|
|
let currentRotationY = 0;
|
|||
|
|
let autoRotate = true;
|
|||
|
|
let mouseStartX = 0;
|
|||
|
|
let mouseStartY = 0;
|
|||
|
|
let rotationStartX = -20;
|
|||
|
|
let rotationStartY = 0;
|
|||
|
|
|
|||
|
|
// 获取当前旋转角度
|
|||
|
|
function getCurrentRotation() {
|
|||
|
|
const transform = window.getComputedStyle(financeCube).transform;
|
|||
|
|
if (transform && transform !== 'none') {
|
|||
|
|
// 从transform matrix中提取旋转角度（简化处理）
|
|||
|
|
const elapsed = Date.now() * 0.001; // 转换为秒
|
|||
|
|
currentRotationY = (elapsed * 18) % 360; // 20秒转360度 = 18度/秒
|
|||
|
|
}
|
|||
|
|
return currentRotationY;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 鼠标交互控制旋转
|
|||
|
|
const cubeContainer = document.querySelector('.finance-cube-container');
|
|||
|
|
if (cubeContainer) {
|
|||
|
|
cubeContainer.addEventListener('mouseenter', (e) => {
|
|||
|
|
autoRotate = false;
|
|||
|
|
// 获取当前的旋转位置
|
|||
|
|
currentRotationY = getCurrentRotation();
|
|||
|
|
currentRotationX = -20;
|
|||
|
|
|
|||
|
|
// 记录鼠标起始位置和旋转起始角度
|
|||
|
|
const rect = cubeContainer.getBoundingClientRect();
|
|||
|
|
mouseStartX = e.clientX - rect.left;
|
|||
|
|
mouseStartY = e.clientY - rect.top;
|
|||
|
|
rotationStartX = currentRotationX;
|
|||
|
|
rotationStartY = currentRotationY;
|
|||
|
|
|
|||
|
|
// 停止CSS动画并设置当前位置
|
|||
|
|
financeCube.style.animation = 'none';
|
|||
|
|
gsap.set(financeCube, {
|
|||
|
|
rotationX: currentRotationX,
|
|||
|
|
rotationY: currentRotationY
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
cubeContainer.addEventListener('mouseleave', () => {
|
|||
|
|
autoRotate = true;
|
|||
|
|
// 从当前位置继续动画
|
|||
|
|
const currentY = gsap.getProperty(financeCube, "rotationY");
|
|||
|
|
financeCube.style.animation = 'rotateCube 20s infinite linear';
|
|||
|
|
financeCube.style.animationDelay = `-${(currentY % 360) / 18}s`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
cubeContainer.addEventListener('mousemove', (e) => {
|
|||
|
|
if (!autoRotate) {
|
|||
|
|
const rect = cubeContainer.getBoundingClientRect();
|
|||
|
|
const x = e.clientX - rect.left;
|
|||
|
|
const y = e.clientY - rect.top;
|
|||
|
|
|
|||
|
|
// 基于鼠标移动的增量计算旋转
|
|||
|
|
const deltaX = (x - mouseStartX) / rect.width * 180;
|
|||
|
|
const deltaY = (y - mouseStartY) / rect.height * 180;
|
|||
|
|
|
|||
|
|
currentRotationY = rotationStartY + deltaX;
|
|||
|
|
currentRotationX = rotationStartX - deltaY;
|
|||
|
|
|
|||
|
|
// 限制X轴旋转范围
|
|||
|
|
currentRotationX = Math.max(-60, Math.min(60, currentRotationX));
|
|||
|
|
|
|||
|
|
gsap.to(financeCube, {
|
|||
|
|
rotationX: currentRotationX,
|
|||
|
|
rotationY: currentRotationY,
|
|||
|
|
duration: 0.1,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 为每个面添加简单的悬停效果
|
|||
|
|
document.querySelectorAll('.cube-face').forEach((face, index) => {
|
|||
|
|
// 添加悬停时的图标缩放效果
|
|||
|
|
const icon = face.querySelector('.face-content i');
|
|||
|
|
if (icon) {
|
|||
|
|
face.addEventListener('mouseenter', () => {
|
|||
|
|
gsap.to(icon, {
|
|||
|
|
scale: 1.1,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
face.addEventListener('mouseleave', () => {
|
|||
|
|
gsap.to(icon, {
|
|||
|
|
scale: 1,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加键盘控制
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
|
|||
|
|
switch(e.key) {
|
|||
|
|
case 'ArrowUp':
|
|||
|
|
rotationX -= 10;
|
|||
|
|
break;
|
|||
|
|
case 'ArrowDown':
|
|||
|
|
rotationX += 10;
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
rotationY -= 10;
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
rotationY += 10;
|
|||
|
|
break;
|
|||
|
|
case ' ':
|
|||
|
|
autoRotate = !autoRotate;
|
|||
|
|
if (autoRotate) {
|
|||
|
|
financeCube.style.animation = 'rotateCube 20s infinite linear';
|
|||
|
|
} else {
|
|||
|
|
financeCube.style.animation = 'none';
|
|||
|
|
}
|
|||
|
|
e.preventDefault();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!autoRotate && (e.key.startsWith('Arrow'))) {
|
|||
|
|
gsap.to(financeCube, {
|
|||
|
|
rotationX: rotationX,
|
|||
|
|
rotationY: rotationY,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 9. 3D项目卡片
|
|||
|
|
function initProjectCards3D() {
|
|||
|
|
document.querySelectorAll('.project-card').forEach(card => {
|
|||
|
|
card.addEventListener('mousemove', (e) => {
|
|||
|
|
const rect = card.getBoundingClientRect();
|
|||
|
|
const x = e.clientX - rect.left;
|
|||
|
|
const y = e.clientY - rect.top;
|
|||
|
|
|
|||
|
|
const centerX = rect.width / 2;
|
|||
|
|
const centerY = rect.height / 2;
|
|||
|
|
|
|||
|
|
const rotateX = (y - centerY) / 10;
|
|||
|
|
const rotateY = (centerX - x) / 10;
|
|||
|
|
|
|||
|
|
gsap.to(card, {
|
|||
|
|
rotationX: rotateX,
|
|||
|
|
rotationY: rotateY,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
transformPerspective: 1000
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
card.addEventListener('mouseleave', () => {
|
|||
|
|
gsap.to(card, {
|
|||
|
|
rotationX: 0,
|
|||
|
|
rotationY: 0,
|
|||
|
|
duration: 0.5,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 10. 磁性按钮效果
|
|||
|
|
function initMagneticButtons() {
|
|||
|
|
document.querySelectorAll('.btn-primary, .btn-secondary').forEach(btn => {
|
|||
|
|
btn.addEventListener('mousemove', (e) => {
|
|||
|
|
const rect = btn.getBoundingClientRect();
|
|||
|
|
const x = e.clientX - rect.left - rect.width / 2;
|
|||
|
|
const y = e.clientY - rect.top - rect.height / 2;
|
|||
|
|
|
|||
|
|
gsap.to(btn, {
|
|||
|
|
x: x * 0.3,
|
|||
|
|
y: y * 0.3,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
btn.addEventListener('mouseleave', () => {
|
|||
|
|
gsap.to(btn, {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 11. 平滑滚动
|
|||
|
|
function initSmoothScroll() {
|
|||
|
|
// 使用GSAP的ScrollSmoother（需要付费插件）或自定义实现
|
|||
|
|
let currentScroll = 0;
|
|||
|
|
let targetScroll = 0;
|
|||
|
|
const ease = 0.1;
|
|||
|
|
|
|||
|
|
function smoothScroll() {
|
|||
|
|
targetScroll = window.scrollY;
|
|||
|
|
currentScroll += (targetScroll - currentScroll) * ease;
|
|||
|
|
|
|||
|
|
// 应用视差效果
|
|||
|
|
gsap.set('.hero-background', {
|
|||
|
|
y: currentScroll * 0.5
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
requestAnimationFrame(smoothScroll);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// smoothScroll(); // 如果需要启用
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 12. 视差滚动
|
|||
|
|
function initParallax() {
|
|||
|
|
gsap.to('.hero-background', {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: '.hero-section',
|
|||
|
|
start: 'top top',
|
|||
|
|
end: 'bottom top',
|
|||
|
|
scrub: 1
|
|||
|
|
},
|
|||
|
|
y: 300,
|
|||
|
|
ease: 'none'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 多层视差
|
|||
|
|
gsap.utils.toArray('.parallax-layer').forEach((layer, index) => {
|
|||
|
|
const speed = (index + 1) * 0.5;
|
|||
|
|
gsap.to(layer, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: layer,
|
|||
|
|
start: 'top bottom',
|
|||
|
|
end: 'bottom top',
|
|||
|
|
scrub: 1
|
|||
|
|
},
|
|||
|
|
y: 100 * speed,
|
|||
|
|
ease: 'none'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 13. 入场动画序列 - 优化速度
|
|||
|
|
function playIntroAnimations() {
|
|||
|
|
const tl = gsap.timeline();
|
|||
|
|
|
|||
|
|
// 更快的动画，排除已有CSS动画的元素
|
|||
|
|
tl.from('.finance-nav', {
|
|||
|
|
y: -100,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.4,
|
|||
|
|
ease: 'power3.out'
|
|||
|
|
})
|
|||
|
|
.from('.hero-content > *:not(.hero-title)', {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.4,
|
|||
|
|
stagger: 0.05,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
}, '-=0.2');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 14. 导航栏交互增强
|
|||
|
|
window.addEventListener('scroll', () => {
|
|||
|
|
const navbar = document.getElementById('navbar');
|
|||
|
|
const scrollY = window.scrollY;
|
|||
|
|
|
|||
|
|
if (scrollY > 50) {
|
|||
|
|
navbar.classList.add('scrolled');
|
|||
|
|
// 添加模糊背景
|
|||
|
|
gsap.to(navbar, {
|
|||
|
|
backdropFilter: 'blur(20px)',
|
|||
|
|
duration: 0.3
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
navbar.classList.remove('scrolled');
|
|||
|
|
gsap.to(navbar, {
|
|||
|
|
backdropFilter: 'blur(0px)',
|
|||
|
|
duration: 0.3
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新导航链接状态
|
|||
|
|
updateActiveNavLink();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 15. 更新活动导航链接
|
|||
|
|
function updateActiveNavLink() {
|
|||
|
|
const sections = document.querySelectorAll('section');
|
|||
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|||
|
|
|
|||
|
|
let current = '';
|
|||
|
|
sections.forEach(section => {
|
|||
|
|
const sectionTop = section.offsetTop;
|
|||
|
|
const sectionHeight = section.clientHeight;
|
|||
|
|
if (scrollY >= (sectionTop - 200)) {
|
|||
|
|
current = section.getAttribute('id');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navLinks.forEach(link => {
|
|||
|
|
link.classList.remove('active');
|
|||
|
|
if (link.getAttribute('href').substring(1) === current) {
|
|||
|
|
link.classList.add('active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 16. 项目详情模态框增强 - 已被index.html中的新版本替代
|
|||
|
|
// 注释掉避免冲突
|
|||
|
|
/*
|
|||
|
|
window.showProjectDetail_old = function(projectId) {
|
|||
|
|
console.log('showProjectDetail called with ID:', projectId);
|
|||
|
|
|
|||
|
|
const modal = document.getElementById('projectModal');
|
|||
|
|
const modalContent = document.getElementById('modalContent');
|
|||
|
|
|
|||
|
|
if (!modal || !modalContent) {
|
|||
|
|
console.error('Modal elements not found!');
|
|||
|
|
alert('模态框元素未找到！请刷新页面重试。');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 项目详情数据
|
|||
|
|
const projectDetails = {
|
|||
|
|
1: {
|
|||
|
|
title: '十足便利店内容营销推广项目',
|
|||
|
|
description: '以"门店职人"KOC为核心，结合抖音矩阵运营、精准DOU+投流和直播互动，累计覆盖全国1200+门店。',
|
|||
|
|
flows: [
|
|||
|
|
{
|
|||
|
|
title: '流程一：明确平台目标',
|
|||
|
|
img: 'public/十足便利店内容营销推广项目/流程一：明确平台目标.jpeg',
|
|||
|
|
overview: '在项目启动阶段，协助完成用户画像分析、内容战略定位与竞品数据对比，明确抖音平台的传播目标与方向。',
|
|||
|
|
content: [
|
|||
|
|
'数据回溯整理：协助分析近6个月的用户互动数据，形成用户兴趣点和偏好趋势表。',
|
|||
|
|
'竞品模式收集：整理"Today便利店""便利蜂"等竞品内容样式与互动量，归纳不足。',
|
|||
|
|
'目标KPI归纳：协助制定曝光、互动和到店转化的分级目标表，用于团队后续追踪。',
|
|||
|
|
'客群画像梳理：参与输出18–30岁年轻群体偏好的数据报告，为内容定位提供支持。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程二：搭建门店职人内容运营体系',
|
|||
|
|
img: 'public/十足便利店内容营销推广项目/流程二：搭建门店职人内容运营体系.jpeg',
|
|||
|
|
overview: '在内容生产阶段，参与建立门店职人梯队、视频模板与发布规范，推动员工成为内容创作者，强化门店的社交化表达。',
|
|||
|
|
content: [
|
|||
|
|
'职人候选筛选：协助各门店推荐1–2名员工，统计兴趣与表现，组成内容梯队。',
|
|||
|
|
'视频模板制定：参与制作"三镜头+字幕+口播"标准模版，降低员工视频制作门槛。',
|
|||
|
|
'内容排班表协助：根据门店节奏，协助建立每周至少2条视频的内容上传计划表。',
|
|||
|
|
'职人认证资料：配合设计门店职人抖音ID卡牌，整理资料用于门店线上线下展示。',
|
|||
|
|
'热榜评选辅助：收集各门店视频数据，整理"爆款内容"评选结果并发布。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程三：搭建门店营销账号矩阵',
|
|||
|
|
img: 'public/十足便利店内容营销推广项目/流程三：搭建门店营销账号矩阵.png',
|
|||
|
|
overview: '在账号搭建阶段，协助建立主子账号联动机制，统一认证与管理，提升内容协同效率和传播覆盖面。',
|
|||
|
|
content: [
|
|||
|
|
'账号资料归档：协助收集并上传各门店账号信息，统一接入企业蓝V后台。',
|
|||
|
|
'主子账号内容分工：整理主账号品牌事件与子账号本地化互动的内容边界表。',
|
|||
|
|
'协同转发执行：参与每周主号转发优质门店子号视频，提升曝光率。',
|
|||
|
|
'账号绩效打分：协助统计粉丝增长、播放量、投产比，生成门店账号表现评分表。',
|
|||
|
|
'内容审核支持：参与搭建词库过滤机制，帮助降低违规内容风险。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程四：执行精准DOU+广告与直播互动',
|
|||
|
|
img: 'public/十足便利店内容营销推广项目/流程四：执行精准 DOU+ 广告与直播互动活动.jpeg',
|
|||
|
|
overview: '在互动与转化阶段，协助执行直播栏目策划、互动机制设置及直播素材归档，强化用户留存与线上线下互动。',
|
|||
|
|
content: [
|
|||
|
|
'直播选题准备：协助制定"午间带货""夜宵推荐"等直播栏目脚本。',
|
|||
|
|
'节日内容排期：整理高考季、夏日饮品季等热点日历，配合直播与短视频执行。',
|
|||
|
|
'直播互动支持：参与设置"弹幕秒杀""关注领券"等直播间互动环节。',
|
|||
|
|
'兑换码整理：协助统计并发放门店线下兑换码，保障直播到店转化。',
|
|||
|
|
'素材库归档：收集高表现直播片段，剪辑后归档至"职人内容素材库"。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程五：实施本地化DOU+定向投流',
|
|||
|
|
img: 'public/十足便利店内容营销推广项目/流程五：实施本地化 DOU+ 定向投流.png',
|
|||
|
|
overview: '在广告投放环节，协助执行精准人群定向、AB测试与预算调控，确保内容投流高效并保持ROI稳定。',
|
|||
|
|
content: [
|
|||
|
|
'人群标签设定：协助建立"女性/25–40岁/距离<3km"精准客群标签组合。',
|
|||
|
|
'素材AB测试：整理不同文案与视频组合，执行小范围测试并记录表现。',
|
|||
|
|
'预算控制支持：参与动态调整每日预算，确保投产比≥3.0。',
|
|||
|
|
'投流监控数据整理：协助更新广告投流与门店数据联动看板，供团队复盘。',
|
|||
|
|
'高ROI案例收集：参与整理表现优异视频，推动跨门店复制拍摄与投放。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程六：推动线下体验与线上互动融合',
|
|||
|
|
img: 'public/十足便利店内容营销推广项目/流程六：推动线下体验与线上互动的融合.jpeg',
|
|||
|
|
overview: '在项目后期，协助建立线上互动与门店体验结合的机制，推动用户到店转化与复购黏性。',
|
|||
|
|
content: [
|
|||
|
|
'点赞兑换执行：协助整理点赞兑换券活动执行情况，统计兑换成功数量。',
|
|||
|
|
'客服响应支持：监控抖音私信与小程序客服，确保响应时间在30秒内。',
|
|||
|
|
'互动活动记录：统计累计参与互动兑换的用户规模，并制作数据简报。',
|
|||
|
|
'会员打卡辅助：协助上线会员打卡功能，记录用户复购与参与数据。',
|
|||
|
|
'用户反馈收集：整理线上线下用户对互动机制的意见，为后续改进提供参考。'
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
2: {
|
|||
|
|
title: '夏季凉被产品出海项目',
|
|||
|
|
description: '聚焦欧美高温市场的"Hot Sleeper"用户群体，围绕凉感舒眠需求打造跨境床品品牌，全年营收3200万美元。',
|
|||
|
|
flows: [
|
|||
|
|
{
|
|||
|
|
title: '流程一：品牌定位与用户细分',
|
|||
|
|
img: 'public/夏季凉被产品出海项目/流程一：品牌定位与用户细分.jpeg',
|
|||
|
|
overview: '在项目初期，协助开展用户调研、竞品分析与定价测试，明确目标人群与品牌定位，为产品研发和渠道策略提供方向。',
|
|||
|
|
content: [
|
|||
|
|
'协助问卷与访谈调研，整理用户对夜间盗汗、体温调节等痛点的反馈数据。',
|
|||
|
|
'参与品牌定位资料整理，提炼"高端智能凉感床品"核心价值。',
|
|||
|
|
'协助品牌视觉语言输出，支持蓝白冷调的包装与主图风格统一。',
|
|||
|
|
'配合定价测试，参与建立欧美市场的阶梯定价方案。',
|
|||
|
|
'协助构建用户旅程地图，整理电商平台用户路径与转化点。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程二：出口法规与认证合规',
|
|||
|
|
img: 'public/夏季凉被产品出海项目/流程二：出口法规与认证合规.jpg',
|
|||
|
|
overview: '在出口合规阶段，协助认证资料整理、包装环保检测与产品标签核对，保障产品满足欧美市场监管要求。',
|
|||
|
|
content: [
|
|||
|
|
'协助整理 CE、RoHS、RED 等认证材料并归档。',
|
|||
|
|
'参与织物安全检测样本送检与结果收集。',
|
|||
|
|
'协助核对包装环保比例，确保 ≥80% 再生纸板符合欧盟政策。',
|
|||
|
|
'参与商品标签检查，确认 EAN-13 条码与原产地标识完整。',
|
|||
|
|
'协助搭建认证文档归档体系，支持跨境平台资质审核。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程三：多平台渠道运营',
|
|||
|
|
img: 'public/夏季凉被产品出海项目/流程三：多平台渠道运营.jpeg',
|
|||
|
|
overview: '在渠道运营环节，协助 Amazon、Shopify 与 TikTok 的店铺维护与流量转化，支持公域引流与私域沉淀。',
|
|||
|
|
content: [
|
|||
|
|
'协助 Amazon 关键词优化与五图内容更新，支持提升自然排名。',
|
|||
|
|
'参与 FBA 补货表格建立，跟进库存动态与发货周期。',
|
|||
|
|
'协助 Shopify 会员管理，录入积分数据并支持自动邮件回访测试。',
|
|||
|
|
'参与 TikTok KOL合作执行，整理达人投放素材与发布时间表。',
|
|||
|
|
'协助数据对接，配合 Google Analytics 建立跨平台用户行为追踪表。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程四：柔性制造与海外物流体系',
|
|||
|
|
img: 'public/夏季凉被产品出海项目/流程四：柔性制造与海外物流体系搭建.jpeg',
|
|||
|
|
overview: '在供应链环节，协助生产进度监控与国际物流方案执行，确保订单交付稳定与跨境履约顺畅。',
|
|||
|
|
content: [
|
|||
|
|
'协助 MES 系统数据录入，支持 SKU 切换与返单调度。',
|
|||
|
|
'参与多路径运输方案整理，记录海运、空运与中欧班列时效数据。',
|
|||
|
|
'协助海外仓入库数据录入，确认 Prime 标准与 DDP 清关记录。',
|
|||
|
|
'配合越南冗余产线测试，整理应急产能启用数据。',
|
|||
|
|
'协助物流追踪表更新，跟进延误订单与异常履约情况。'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '流程五：内容营销与品牌曝光',
|
|||
|
|
img: 'public/夏季凉被产品出海项目/流程五：内容营销与品牌曝光.jpg',
|
|||
|
|
overview: '在营销推广阶段，协助媒体合作、达人传播与UGC激励执行，支持品牌声量与转化提升。',
|
|||
|
|
content: [
|
|||
|
|
'协助整理媒体评测文章与开箱视频素材，归档至内容库。',
|
|||
|
|
'参与 TikTok 话题数据统计，监测标签播放量与互动效果。',
|
|||
|
|
'协助 Prime Day 促销执行，整理单日爆单数据并生成日报。',
|
|||
|
|
'参与用户晒单奖励发放，收集UGC内容并分类归档。',
|
|||
|
|
'协助 Notion 内容库管理，维护命名规则与版本更新。'
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
3: {
|
|||
|
|
title: '良品铺子采购方案设计项目',
|
|||
|
|
description: '通过建立科学的需求预测机制、严格的供应商准入制度和数字化的合同履约管理，实现采购全过程标准化与可视化。',
|
|||
|
|
flows: [
|
|||
|
|
{ title: '流程一：制定采购需求计划', img: 'public/良品铺子采购方案设计项目/流程一：制定采购需求计划.jpeg' },
|
|||
|
|
{ title: '流程二：供应商准入与评估选择', img: 'public/良品铺子采购方案设计项目/流程二：供应商准入与评估选择.jpeg' },
|
|||
|
|
{ title: '流程三：采购执行与合同签订', img: 'public/良品铺子采购方案设计项目/流程三：采购执行与合同签订.jpeg' },
|
|||
|
|
{ title: '流程四：到货验收与质量检查', img: 'public/良品铺子采购方案设计项目/流程四：到货验收与质量检查.jpeg' },
|
|||
|
|
{ title: '流程五：物流运输与库存入库', img: 'public/良品铺子采购方案设计项目/流程五：物流运输与库存入库.jpeg' },
|
|||
|
|
{ title: '流程六：供应商绩效管理与持续改进', img: 'public/良品铺子采购方案设计项目/流程六：供应商绩效管理与持续改进.jpeg' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
4: {
|
|||
|
|
title: '永辉生鲜超市供应链管理设计项目',
|
|||
|
|
description: '通过构建优选供应商体系、完善冷链物流、优化库存周转，显著提升了库存流转效率与配送时效。',
|
|||
|
|
flows: [
|
|||
|
|
{ title: '流程一：构建优选供应商体系', img: 'public/永辉生鲜超市供应链管理设计项目/流程一：构建优选供应商体系与合同履约机制.jpeg' },
|
|||
|
|
{ title: '流程二：建设全程冷链物流系统', img: 'public/永辉生鲜超市供应链管理设计项目/流程二：建设全程冷链物流系统保障产品新鲜.jpeg' },
|
|||
|
|
{ title: '流程三：优化库存周转与信息协同', img: 'public/永辉生鲜超市供应链管理设计项目/流程三：优化库存周转与信息协同策略.jpg' },
|
|||
|
|
{ title: '流程四：分析客户偏好与多渠道订单响应', img: 'public/永辉生鲜超市供应链管理设计项目/流程四：分析客户偏好与多渠道订单响应机制.jpeg' },
|
|||
|
|
{ title: '流程五：构建反馈优化与持续改进机制', img: 'public/永辉生鲜超市供应链管理设计项目/流程五：构建反馈优化与供应链持续改进机制.jpeg' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
5: {
|
|||
|
|
title: '某证券公司申请增加业务种类核准项目',
|
|||
|
|
description: '围绕新增"融资融券、做市交易、代销金融产品"三项业务，在三个月监管时限内实现换证、权限开通与经纪端SOP上线。',
|
|||
|
|
flows: [
|
|||
|
|
{ title: '流程一：构建立项论证', img: 'public/某证券公司申请增加业务种类核准项目/流程一：构建立项论证.jpg' },
|
|||
|
|
{ title: '流程二：规范公司治理与内部决策程序', img: 'public/某证券公司申请增加业务种类核准项目/流程二：规范公司治理与内部决策程序.jpeg' },
|
|||
|
|
{ title: '流程三：实施资本实力与风控指标复核', img: 'public/某证券公司申请增加业务种类核准项目/流程三：实施资本实力与风控指标复核.jpeg' },
|
|||
|
|
{ title: '流程四：制定制度体系与合规意见', img: 'public/某证券公司申请增加业务种类核准项目/流程四：制定制度体系与合规意见.jpeg' },
|
|||
|
|
{ title: '流程五：封装报批、线上申报与测试投产', img: 'public/某证券公司申请增加业务种类核准项目/流程五：封装报批、线上申报与测试投产.png' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const project = projectDetails[projectId] || projectDetails[1];
|
|||
|
|
|
|||
|
|
// 显示模态框（检查GSAP是否可用）
|
|||
|
|
if (typeof gsap !== 'undefined') {
|
|||
|
|
// 使用GSAP动画
|
|||
|
|
gsap.fromTo(modal,
|
|||
|
|
{
|
|||
|
|
opacity: 0,
|
|||
|
|
scale: 0.8
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
opacity: 1,
|
|||
|
|
scale: 1,
|
|||
|
|
duration: 0.3,
|
|||
|
|
ease: 'back.out(1.7)',
|
|||
|
|
display: 'block'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
// 直接显示模态框
|
|||
|
|
modal.style.display = 'block';
|
|||
|
|
modal.style.opacity = '1';
|
|||
|
|
console.warn('GSAP not loaded, using simple display');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成流程详情HTML
|
|||
|
|
let flowsHTML = '';
|
|||
|
|
project.flows.forEach((flow, index) => {
|
|||
|
|
let contentHTML = '';
|
|||
|
|
if (flow.content && flow.content.length > 0) {
|
|||
|
|
contentHTML = '<ul style="margin: 15px 0; padding-left: 20px;">';
|
|||
|
|
flow.content.forEach(item => {
|
|||
|
|
contentHTML += `<li style="margin: 8px 0; color: #555; line-height: 1.6;">${item}</li>`;
|
|||
|
|
});
|
|||
|
|
contentHTML += '</ul>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
flowsHTML += `
|
|||
|
|
<div class="flow-item" style="margin-bottom: 40px; padding: 20px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,215,0,0.1);">
|
|||
|
|
<h4 style="color: var(--finance-gold); margin-bottom: 15px; font-size: 1.2rem;">${flow.title}</h4>
|
|||
|
|
${flow.overview ? `<p style="color: #666; margin-bottom: 15px; line-height: 1.6;">${flow.overview}</p>` : ''}
|
|||
|
|
${contentHTML}
|
|||
|
|
${flow.img ? `<img src="${flow.img}" alt="${flow.title}" style="width: 100%; margin-top: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">` : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 加载项目详情内容
|
|||
|
|
modalContent.innerHTML = `
|
|||
|
|
<h2 style="color: var(--finance-gold); margin-bottom: 20px;">${project.title}</h2>
|
|||
|
|
<div class="project-details">
|
|||
|
|
<p style="margin-bottom: 30px; color: #666; line-height: 1.8;">${project.description}</p>
|
|||
|
|
<h3 style="margin-bottom: 20px; color: var(--finance-blue);">项目流程详情</h3>
|
|||
|
|
<div class="flows-container" style="max-height: 70vh; overflow-y: auto; padding-right: 10px;">
|
|||
|
|
${flowsHTML}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 显示模态框 - 使用更可靠的方法
|
|||
|
|
modal.style.display = 'flex';
|
|||
|
|
modal.style.alignItems = 'center';
|
|||
|
|
modal.style.justifyContent = 'center';
|
|||
|
|
|
|||
|
|
// 确保模态框在最顶层
|
|||
|
|
modal.style.zIndex = '9999';
|
|||
|
|
|
|||
|
|
// 添加一个类以便调试
|
|||
|
|
modal.classList.add('modal-open');
|
|||
|
|
|
|||
|
|
console.log('Modal displayed with display:', modal.style.display);
|
|||
|
|
console.log('Modal visibility:', window.getComputedStyle(modal).display);
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 17. 关闭模态框 - 已被index.html中的新版本替代
|
|||
|
|
/*
|
|||
|
|
window.closeModal_old = function() {
|
|||
|
|
console.log('closeModal called');
|
|||
|
|
const modal = document.getElementById('projectModal');
|
|||
|
|
|
|||
|
|
if (!modal) {
|
|||
|
|
console.error('Modal element not found!');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接关闭，确保可靠性
|
|||
|
|
modal.style.display = 'none';
|
|||
|
|
modal.classList.remove('modal-open');
|
|||
|
|
console.log('Modal closed');
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 18. 技能进度条动画增强
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
const skillBars = document.querySelectorAll('.skill-progress');
|
|||
|
|
|
|||
|
|
skillBars.forEach(bar => {
|
|||
|
|
const width = bar.getAttribute('data-width');
|
|||
|
|
|
|||
|
|
gsap.to(bar, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: bar,
|
|||
|
|
start: 'top 80%'
|
|||
|
|
},
|
|||
|
|
width: width + '%',
|
|||
|
|
duration: 1.5,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 19. 创建动态背景图形
|
|||
|
|
function createDynamicShapes() {
|
|||
|
|
const shapesContainer = document.createElement('div');
|
|||
|
|
shapesContainer.className = 'dynamic-shapes';
|
|||
|
|
document.body.appendChild(shapesContainer);
|
|||
|
|
|
|||
|
|
for (let i = 0; i < 5; i++) {
|
|||
|
|
const shape = document.createElement('div');
|
|||
|
|
shape.className = 'floating-shape';
|
|||
|
|
shape.style.left = Math.random() * 100 + '%';
|
|||
|
|
shape.style.top = Math.random() * 100 + '%';
|
|||
|
|
shape.style.width = Math.random() * 100 + 50 + 'px';
|
|||
|
|
shape.style.height = shape.style.width;
|
|||
|
|
|
|||
|
|
shapesContainer.appendChild(shape);
|
|||
|
|
|
|||
|
|
// GSAP浮动动画
|
|||
|
|
gsap.to(shape, {
|
|||
|
|
x: 'random(-100, 100)',
|
|||
|
|
y: 'random(-100, 100)',
|
|||
|
|
rotation: 'random(-180, 180)',
|
|||
|
|
duration: 'random(10, 20)',
|
|||
|
|
repeat: -1,
|
|||
|
|
yoyo: true,
|
|||
|
|
ease: 'sine.inOut'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 20. 性能优化
|
|||
|
|
const debounce = (func, wait) => {
|
|||
|
|
let timeout;
|
|||
|
|
return function executedFunction(...args) {
|
|||
|
|
const later = () => {
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
func(...args);
|
|||
|
|
};
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
timeout = setTimeout(later, wait);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 优化窗口调整事件
|
|||
|
|
window.addEventListener('resize', debounce(() => {
|
|||
|
|
// 重新计算布局
|
|||
|
|
ScrollTrigger.refresh();
|
|||
|
|
}, 250));
|
|||
|
|
|
|||
|
|
// 初始化动态背景
|
|||
|
|
createDynamicShapes();
|
|||
|
|
|
|||
|
|
// 21. 简化的扑克牌效果实现
|
|||
|
|
const pokerEffect = {
|
|||
|
|
cards: [],
|
|||
|
|
|
|||
|
|
init() {
|
|||
|
|
// 获取所有扑克牌元素
|
|||
|
|
this.cards = [...document.querySelectorAll('.poker-card')];
|
|||
|
|
|
|||
|
|
// 为每张牌添加点击事件
|
|||
|
|
this.cards.forEach((card, index) => {
|
|||
|
|
// 点击事件 - 显示项目详情
|
|||
|
|
card.addEventListener('click', (e) => {
|
|||
|
|
// 如果点击的是链接本身，让它正常执行
|
|||
|
|
if (e.target.closest('.project-link')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 否则触发项目详情
|
|||
|
|
const projectNumber = index + 1;
|
|||
|
|
if (typeof showProjectDetail === 'function') {
|
|||
|
|
showProjectDetail(projectNumber);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 页面加载完成后初始化扑克牌效果
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
// 检查是否存在扑克牌容器
|
|||
|
|
if (document.querySelector('.poker-container')) {
|
|||
|
|
pokerEffect.init();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('财经商贸简历增强版已加载完成！');
|