大叔日记

NeutralPress

大叔云页 · Digital World | 大叔日记 - 一个爱分享的大叔!记录生活·分享热爱·探索世界

让每个人，都拥有一个属于自己的数字世界。
BUILD YOUR DIGITAL WORLD.

版本：1.0

多页面 · 中英混排（中文为主 + 英文点缀高级感）的数字创作工作室官网。纯静态站点，零依赖，全部资源本地化。

页面结构（11 页）

主要特性

「世界构建」启动动画：DASHUYUNYE 十个字母随进度逐个凝聚、24 格进度方块点亮、百分比缓动 0→100；加载完成时屏幕上下分开进入网站。站内跳转只保留页面传送转场，不重复播放启动动画。
传送式页面转场：青紫渐变 + 扫描网格 + 随机传送文字 + 能量条，页面间跳转全屏遮罩滑入滑出。
科技感背景：细青色栅格 + 青/紫双光晕漂移 + 星链粒子（邻近连线、与光标互动）三层叠加，恒定不闪烁。
光标与点击特效：Canvas「信号丝带」拖尾 + 脉冲准星光标 + 点击冲击环/火花 + 按钮涟漪。
背景音乐与音效：背景音乐（进入页面自动播放，跨页面无缝续播）+ 终端风点击音效；右下角 SOUND 开关，偏好本地记忆。
联系体系：电话 / 邮箱 / 微信入口；点击微信号自动复制并弹出放大二维码；页脚含 YouTube、哔哩哔哩、QQ、抖音四个社交图标（抖音支持复制抖音号 + 唤起 App / 网页直达）。
响应式适配：桌面 / 平板 / 手机全适配，移动端汉堡导航、间距与页脚布局独立优化。
排版细节：页脚四栏等宽居中（品牌 / 导航 / 联系 / 二维码），CTA 横幅 + 底栏；滚动揭示动画贯穿全站。

产品报价

档位	名称	价格	适用
01	一隅	¥999	个人主页（单页定制）
02	一境	¥1999	作品集 / 个人品牌（多页面 + 动效）
03	一城	¥2999	小型业务官网（完整视觉系统）
超越	无界	报价面谈	私人定制（功能与规模不限）

技术栈

HTML5 / CSS3 / 原生 JavaScript（零依赖、零框架）
Canvas（粒子背景 / 信号丝带光标）+ requestAnimationFrame（启动动画 / 转场）
IntersectionObserver（滚动揭示）
Web Audio / HTMLAudioElement（BGM 与点击音效）
localStorage / sessionStorage（音效偏好、跨页音乐续播、启动动画去重）

运行

纯静态站点，任意静态服务器均可：

访问。

目录结构

http://localhost:8080

index.html        首页（首屏 / 你是谁 / 精选作品 / 报价速览 / 大叔 / 启动表单 / 联系我们）
cases.html        精选作品列表（6 例，卡片按钮跳转详情）
case-01..06.html  作品详情页 ×6（概述 / 设计要点 / 我想要同款 / 上一个·下一个）
pricing.html      产品报价（一隅 ¥999 / 一境 ¥1999 / 一城 ¥2999 / 无界·私人定制）
about.html        大叔是谁（值守原则）
contact.html      联系我们（终端式联系入口）

大叔云页/
├── index.html            # 首页
├── cases.html            # 精选作品列表
├── case-01..06.html      # 作品详情 ×6
├── pricing.html          # 产品报价
├── about.html            # 大叔是谁
├── contact.html          # 联系我们
├── css/                  # style / animations / responsive
├── js/
│   ├── main.js           # 粒子背景 / 启动动画 / 光标特效 / 转场 / 复制与弹窗 / 社交跳转
│   ├── animation.js      # 滚动揭示 / 身份选择器
│   ├── language.js       # 站点文案数据（身份 / 作品 / 双语内容）
│   └── sound.js          # BGM 自动播放 / 点击音效 / SOUND 开关 / 跨页续播
├── assets/
│   ├── images/           # 全部本地化 WebP（原创，无水印）
│   │   ├── hero/         # 首屏主视觉
│   │   ├── avatars/      # 大叔形象
│   │   ├── projects/     # 作品配图（预览 + 详情）
│   │   └── ui/           # logo / 微信二维码
│   └── audio/            # bgm.mp3（背景音乐）/ click.mp3（点击音效）
├── ASSET_LICENSE.md      # 素材版权说明
└── README.md