Project 02

先拜金蟾

基于视频帧重叠技术的移动端无缝互动影像实验。

缘起

天地初开,女娲娘娘炼五色石以补苍天。补天既毕,尚余数石零落人间。其一灵石,受日月精华,感天地灵气,崩裂而出,化一顽猴,拜师学艺,闹得天翻地覆,后皈依佛门,终成正果。

又一灵石,幻化人形,投胎于钟鸣鼎食之家,口衔美玉而生。府中莺莺燕燕,终日环绕,吟诗作对,好不快活。奈何繁华如梦,转眼成空,落得个白茫茫大地真干净。

尚余一石,命运多舛。补天之时,不慎被娘娘玉足踢落,坠入不见天日之沼泽深处。此石于污泥浊水之中,默默吸收周遭灵韵,历经千年修炼,终化为一只金蟾。此蟾与众不同,只进不出,专司守财聚宝,口含铜钱,端坐莲花,世人称之为"招财金蟾"。

今人欲拜金蟾,须以"黄金"投之。何也?盖金蟾天生喜聚钱财,有天下第一守财之力,规则不侵,万法不破。投"黄金"于蟾,乃表诚心,金蟾感念,财运自来。此乃"先拜金蟾"之缘起也。

隐藏细节

  • "黄金"光标 — 在电脑端,鼠标会变成一坨"黄金"图标。当鼠标移到马桶目标区域时,"黄金"会开始抖动,提示你可以松手了
  • 抖动反馈 — "黄金"在目标区域内会持续抖动(poopShake动画),离开区域后停止,提供精确的交互反馈
  • 旋转消失 — "黄金"落入马桶后会旋转720度并缩小消失(poopSpinOut动画),然后无缝切换到第三段视频
  • 雾气遮罩 — 视频边缘有一层径向渐变的雾气效果(vignette-mist),模拟老式CRT显示器的边缘暗角,并带有噪点纹理
  • 加载等待 — 页面会等待所有视频和音频加载完毕才显示"START",如果5秒内没加载完会强制显示,避免用户等待过久
  • 音量控制 — 背景音乐音量固定为0.3(30%),循环播放,在视频切换时会暂停和恢复
  • 移动端适配 — 触摸设备使用touchstart/touchmove/touchend事件,桌面端使用mousedown/mouseup事件,两套交互逻辑完全独立
  • 返回按钮保护 — 鼠标移到左上角"← 返回"按钮时,便便光标会隐藏,恢复为正常指针,避免影响导航

技术实现

视频帧重叠:三段视频(01.mp4、02.mp4、03.mp4)通过CSS z-index叠放。切换时先将新视频放到z-index: 1并开始播放,等第一帧渲染完成后再将新视频提升到z-index: 2,旧视频降为z-index: 0并暂停。这个过程通过timeupdate事件监听和200ms安全网超时来保证可靠性。

状态机:整个交互流程由一个简单的状态机控制:playing_01 → looping_02 → playing_03 → playing_01。每个状态对应一段视频和一组交互规则。

交互检测:使用getBoundingClientRect()获取马桶目标区域的精确坐标,判断鼠标/触摸点是否在区域内。支持鼠标按下-拖动-松手和触摸-滑动-抬起两种交互模式。

计数器:使用localStorage存储拜祭次数,每次互动后递增并更新显示。数据仅存储在本地浏览器中,不会跨设备同步。

技术栈

HTML5 Video CSS3 Animations JavaScript localStorage Touch Events Mouse Events

技术规格

  • 视频格式 — MP4 (H.264),9:16竖屏比例
  • 视频数量 — 3段(开场、循环等待、互动反馈)
  • 切换机制 — z-index叠放 + timeupdate事件 + 200ms安全网
  • 交互方式 — 桌面端:鼠标拖放;移动端:触摸滑动
  • 光标效果 — 自定义💩光标,支持抖动和旋转消失动画
  • 边缘效果 — 径向渐变雾气遮罩 + SVG噪点纹理
  • 字体 — Press Start 2P(像素风)+ Orbitron(数字显示)
  • 音频 — MP3背景音乐,音量30%,循环播放
  • 存储 — localStorage存储拜祭计数
  • 兼容性 — 支持现代浏览器,移动端和桌面端