寻年传说 · 2016 春节互动 H5

HTML5

4 阅读0 点赞

预览地址：https://cailven.com/demo/ksf2016CNY/

作品简介

2016 丙申猴年春节品牌互动 H5。以「寻年传说 · 美猴传奇」为主题，结合 CSS3D 视差场景、Canvas 动画与陀螺仪体感交互，邀请李易峰 / 杨洋 / 张艺兴三位明星化身「擒年兽」主角，用户在转动手机的过程中探索场景、触发剧情，最终观看品牌 TVC 并进入分享闭环。

交互亮点

陀螺仪视差：转动手机驱动 3D 场景层级位移，营造空间纵深感
点击探索：场景内置多个触发热区，点击明星 / 年兽触发剧情弹窗
寻蛋解锁：找到场景中的彩蛋后跳转播放品牌 TVC
横竖屏引导：自动检测屏幕方向，竖屏锁定体验，横屏给出旋转提示
微信分享：接入微信 JSSDK，支持自定义朋友圈 / 好友分享卡片

技术栈

模块	技术
3D 场景	CSS3D（css3d.min.js）
Canvas 动画	CreateJS（EaselJS / TweenJS / MovieClip / PreloadJS）
动效补间	JSTween
DOM 操作	jQuery
微信分享	WeChat JS-SDK
统计	Google Analytics

项目结构

ksfCNY/
├─ index.html              # 入口页
├─ impublic/
│  ├─ css/main.css         # 主样式
│  ├─ js/
│  │  ├─ main.js           # 入口逻辑 / 陀螺仪授权 / 资源加载
│  │  ├─ sence.js          # 3D 场景搭建 / 交互绑定
│  │  ├─ intro.js          # Flash 导出的 Canvas 动画时间轴
│  │  └─ 第三方库（jquery / createjs / css3d / jstween / jweixin）
│  ├─ img/                 # 场景、人物、怪物、UI 素材
│  ├─ music/               # intro.mp3 / loop.mp3
│  └─ video/tvc.mp4        # 品牌 TVC

运行说明

项目为纯静态 H5，直接部署到任意静态服务器即可，例如：
```
# 项目根目录
python -m http.server 8080
```
由于涉及音频自动播放与陀螺仪权限，必须在 HTTPS 环境下并经用户手势触发：
- 进入页面后会显示「点击开始」引导层
- 用户点击后请求陀螺仪权限（iOS 13+ 走 DeviceOrientationEvent.requestPermission，Android 直接进入）
- 授权完成后再开始加载资源并播放音频
最佳体验设备为手机（竖屏），桌面浏览器可访问但陀螺仪交互无效果。

← Previous Project