virtheart/arcticnewone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
64 Commits 1 Branch 0 Tags
3ffc2086e3f896b6acdaf47f2483fe2879747daa
Commit Graph

8 Commits

Author SHA1 Message Date
陈春 3ffc2086e3 fix: 修复客户评价模糊 + 工作流程卡片溢出 
🐛 HomeTestimonials:
- 移除 blur 滤镜，卡片不再模糊
- 添加触摸支持（touchstart/touchmove/touchend）
- 降低拖拽阈值（100px → 50px），更灵敏
- 加快切换动画（0.8s → 0.5s）
- 添加 select-none 防止拖拽选中文本
- 鼠标样式：grab / grabbing

🐛 HomeProcess:
- 卡片宽度缩小（280/320px → 240/280px）
- 编号圆圈缩小（20/24 → 16/20）
- 图标容器缩小
- 内边距缩小（p-6/8 → p-5/6）
- 防止最后一张卡片被遮挡

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 20:15:00 +08:00
陈春 77567b2cc2 refactor: 移除新增板块的 ScrollTrigger pin 效果 
从 HomeServices 开始往后的 6 个板块，
去掉 pin（固定）和 scrub（滚动驱动）效果，
改为正常的入场动画：滚动到时触发动画，播放完毕后正常滚动

修改的板块:
- HomeServices: 卡片飞入归位（无 pin）
- HomeAchievements: 逐个数字展示（无 pin）
- HomeTestimonials: 卡片扩散入场（无 pin）
- HomeTechStack: 标签散开入场（无 pin）
- HomeProcess: 标题 + 线条 + 步骤入场（无 pin）
- HomeUpdates: 卡片错开入场（无 pin）

保留 HomePartnersWork 的 pin 效果（原有板块）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 20:10:40 +08:00
陈春 e94f7d92e9 fix: 修复所有板块 pin 滚动空白间隙 + 服务卡片适配屏幕 
🐛 问题1: 滚动到下一个内容时有空白区
根因: 时间线动画之间有间隙（动画 duration < 步骤间距）
修复: 所有板块改用 cursor 模式，每个步骤精确衔接，无空白

🐛 问题2: 服务卡片太大，一屏显示不全
根因: 卡片高度固定 h-[380px]，不适配小屏幕
修复: 改用 clamp(260px, 38vh, 400px) 自适应屏幕高度

🔧 修复的 6 个板块:
1. HomeTestimonials - 淡入淡出切换无间隙
2. HomeServices - 卡片聚焦无间隙 + 自适应高度
3. HomeAchievements - 数字展示无间隙
4. HomeTechStack - 球体旋转无间隙
5. HomeProcess - 步骤展示 + 横向滚动无间隙
6. HomeUpdates - 卡片分批出现无间隙

📐 cursor 模式:
每一步动画 duration 正好等于步骤间距，
动画结束 = 下一步开始，完美衔接

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 20:03:36 +08:00
陈春 02323fd426 fix: 修复所有首页板块 pin 滚动不连贯问题 
🐛 问题根源:
每个板块有两套独立的 ScrollTrigger 在同一个元素上：
- 入场动画用独立的 scrollTrigger
- pin 效果用 ScrollTrigger.create
两者互相冲突，导致空白间隙和动画跳变

✅ 修复方案:
将所有板块的入场动画和 pin 滚动合并为一个统一时间线（timeline），
确保动画从 pin 开始到结束完全连续，无空白区

🔧 修复的 6 个板块:
1. HomeTestimonials - 标题入场 + 卡片逐张切换（淡入淡出）
2. HomeServices - 标题入场 + 卡片飞入归位 + 逐张聚焦
3. HomeAchievements - 逐个成就项展示（前一个淡出，后一个淡入）
4. HomeTechStack - 内容入场 + 标签散开 + 球体旋转
5. HomeProcess - 标题入场 + 线条绘制 + 步骤逐个出现 + 横向滚动
6. HomeUpdates - 标题入场 + 卡片分批出现

🎯 效果:
- pin 期间动画完全连续，无空白间隙
- 入场和 pin 共享同一个 timeline
- scrub: 0.5 让滚动更平滑
- 每个板块到下一个板块无缝过渡

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 19:53:46 +08:00
陈春 bb0020b406 feat: 为首页新增板块添加 ScrollTrigger pin 滚动效果 
✨ 新增 pin 效果（板块固定，内容随滚动切换）:

1. HomeTestimonials - 客户评价
   - 固定板块，滚动自动切换卡片
   - 每屏切换一张评价卡片

2. HomeTechStack - 技术栈
   - 固定板块，3D 球体自动旋转一圈
   - 滚动控制旋转进度

3. HomeProcess - 创意流程
   - 固定板块，横向滚动浏览所有步骤
   - 6 个步骤依次展示

4. HomeServices - 服务能力
   - 固定板块，逐张卡片聚焦展示
   - 聚焦卡片放大，其他缩小变暗
   - 所有卡片飞入归位后逐个聚焦

5. HomeAchievements - 数字成就
   - 固定板块，逐个成就项展示
   - 每个数字滚动计数动画触发

6. HomeUpdates - 最新动态
   - 固定板块，逐批展示卡片
   - 分批出现，每批 3 个卡片

🎯 效果:
- 滚动到板块时自动固定（pin）
- 内部元素随滚动依次展示
- 所有内部元素展示完毕后才继续下一个板块
- 每个板块独特的 pin 动画效果

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 19:49:18 +08:00
陈春 ae20560a35 fix: 修复首页加载和动画时序问题 
🐛 问题修复:
- 移除所有新板块的初始 opacity: 0 样式
- 防止新板块初始隐藏导致黑屏问题
- 确保页面加载后内容立即可见
- 修复菜单延迟出现的问题

🎨 优化调整:
- 改用 CSS class 控制动画初始状态
- ScrollTrigger 动画在滚动到对应位置时才触发
- 不影响首屏 Hero 和 Intro 的加载动画
- 保持所有板块的入场动画效果

✅ 修复的组件:
- HomeServices
- HomeAchievements
- HomeTestimonials
- HomeTechStack
- HomeProcess
- HomeUpdates
- HomeCTA

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 19:26:57 +08:00
陈春 42c96f7363 refactor: 调整首页所有板块为全屏布局 
🎨 设计调整:
- 所有板块改为 min-h-screen 全屏展示
- 每个板块独立占据一屏，视觉冲击力更强
- 统一使用 flex 居中布局
- 调整标题和内容间距，更适合全屏显示
- 保持响应式设计和所有动画效果

📐 修改的组件:
- HomeServices: 服务能力展示
- HomeAchievements: 数字成就展示
- HomeTestimonials: 客户评价轮播
- HomeTechStack: 技术栈展示
- HomeProcess: 创意流程时间线
- HomeUpdates: 最新动态网格

✨ 视觉效果:
- 更加现代化的全屏滚动体验
- 每个板块都有足够的呼吸空间
- 符合整体设计风格

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 19:19:17 +08:00
陈春 cd87644d41 feat: 扩展首页内容，新增7个高级动画板块 
✨ 新增首页板块:
- HomeServices: 服务能力展示（3D卡片翻转 + 视差移动）
- HomeAchievements: 数字成就展示（数字滚动 + 粒子背景）
- HomeTestimonials: 客户评价轮播（3D轮播 + 拖拽交互）
- HomeTechStack: 技术栈展示（3D球体 + 鼠标控制旋转）
- HomeProcess: 创意流程时间线（横向滚动 + SVG线条动画）
- HomeUpdates: 最新动态网格（Bento布局 + 悬浮卡片）
- HomeCTA: 全屏CTA区域（文字分裂动画 + 星空粒子）

🎨 设计亮点:
- 每个板块独特的动画效果（翻转、滚动、拖拽、旋转、绘制）
- 避免传统布局，采用创意设计
- 丰富的交互效果（hover、拖拽、视差）
- Canvas粒子动画和SVG路径动画
- 响应式设计，完美适配移动端

🌍 国际化:
- 完整的中英文内容
- 涵盖所有新板块的文案

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-03 19:14:53 +08:00