先拜金蟾
基于视频帧重叠技术的移动端无缝互动影像实验。
缘起
天地初开,女娲娘娘炼五色石以补苍天。补天既毕,尚余数石零落人间。其一灵石,受日月精华,感天地灵气,崩裂而出,化一顽猴,拜师学艺,闹得天翻地覆,后皈依佛门,终成正果。
又一灵石,幻化人形,投胎于钟鸣鼎食之家,口衔美玉而生。府中莺莺燕燕,终日环绕,吟诗作对,好不快活。奈何繁华如梦,转眼成空,落得个白茫茫大地真干净。
尚余一石,命运多舛。补天之时,不慎被娘娘玉足踢落,坠入不见天日之沼泽深处。此石于污泥浊水之中,默默吸收周遭灵韵,历经千年修炼,终化为一只金蟾。此蟾与众不同,只进不出,专司守财聚宝,口含铜钱,端坐莲花,世人称之为"招财金蟾"。
今人欲拜金蟾,须以"黄金"投之。何也?盖金蟾天生喜聚钱财,有天下第一守财之力,规则不侵,万法不破。投"黄金"于蟾,乃表诚心,金蟾感念,财运自来。此乃"先拜金蟾"之缘起也。
隐藏细节
- "黄金"光标 — 在电脑端,鼠标会变成一坨"黄金"图标。当鼠标移到马桶目标区域时,"黄金"会开始抖动,提示你可以松手了
- 抖动反馈 — "黄金"在目标区域内会持续抖动(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存储拜祭次数,每次互动后递增并更新显示。数据仅存储在本地浏览器中,不会跨设备同步。
技术栈
技术规格
- 视频格式 — MP4 (H.264),9:16竖屏比例
- 视频数量 — 3段(开场、循环等待、互动反馈)
- 切换机制 — z-index叠放 + timeupdate事件 + 200ms安全网
- 交互方式 — 桌面端:鼠标拖放;移动端:触摸滑动
- 光标效果 — 自定义💩光标,支持抖动和旋转消失动画
- 边缘效果 — 径向渐变雾气遮罩 + SVG噪点纹理
- 字体 — Press Start 2P(像素风)+ Orbitron(数字显示)
- 音频 — MP3背景音乐,音量30%,循环播放
- 存储 — localStorage存储拜祭计数
- 兼容性 — 支持现代浏览器,移动端和桌面端