歌手大赛 H5 活动页模板 | 全屏滑动 + 动画 + 微信分享，开箱即用

基于 Swiper + swiper.animate 打造的全屏滑动 H5 活动页模板。开箱即用，替换品牌素材即可上线。

一场歌手大赛的传播，往往就靠一个 H5：微信群里转发、朋友圈刷屏、选手拉票。但一个”能刷屏”的 H5，需要全屏翻页、逐元素入场动画、背景音乐、视频播放、赛程弹窗、分享引导这一整套体验链，任何一环做得粗糙，用户就会在 3 秒内划走。这套模板以歌手大赛为原型，将完整的活动 H5 体验做成单文件页面，替换图片、视频与文案即可直接投入传播。

模板亮点

1. 五屏全屏沉浸式结构

基于 Swiper 竖向全屏翻页（direction: vertical + loop + 鼠标滚轮控制），一屏一主题：主视觉首页 → 赛程安排 → 宣传视频 ×2 → 分享转化，底部箭头持续引导用户下滑，叙事节奏完整。

2. 专业级页面动画编排

• 逐元素入场：swiper.animate（Swiper 官方动画插件）配合 animate.css，每屏元素以 bounceInUp 依次入场，延迟从 0s 到 2s 阶梯编排，翻到即播
• 翻页视差：onProgress 中对每页施加 translate3d + scaleY + opacity 变换，翻页时前后两屏产生纵深感过渡，而非生硬切换
• 加载页：内置 loading 遮罩，资源加载完成后揭开页面，开场不白屏

3. 音视频体验完整

• 背景音乐：右上角悬浮开关，开启 / 关闭均有”音乐开启 / 音乐关闭”气泡提示，支持自动循环播放
• 音画互斥：视频播放时背景音乐自动暂停，视频暂停后音乐自动恢复，两段视频之间同样互斥切换——这是活动 H5 最容易被忽略的细节
• 自定义视频播放按钮：两屏宣传视频均带品牌化播放按钮，点击即播

4. 赛程详情弹窗体系

初赛 / 复赛 / 半决赛 / 决赛 / 颁奖晚会五个赛程节点各配 reveal 模态弹窗，展示时间与规则长图；赛程时间轴卡片 + “点击查看详情”入口，信息层级清晰。

5. 微信传播链路内置

• 分享引导层：点击分享按钮弹出”点击右上角分享给好友”引导蒙层，点击即关闭
• 自定义分享内容：wechatAPI 封装 WeixinJSBridge，分享标题 / 描述 / 图片 / 链接在页面底部一处配置，发送给好友与分享到朋友圈均可生效

技术栈

技术	版本	用途
Swiper	3.0.6	竖向全屏翻页 / 视差过渡
swiper.animate	—	页面元素入场动画（Swiper 官方插件）
animate.css	—	CSS3 动效库（bounceInUp 等）
jQuery	1.7.1	音乐开关 / 视频控制 / 弹窗
jquery.reveal	—	赛程详情模态弹窗
wechatAPI	—	微信自定义分享（WeixinJSBridge）

项目结构

gsdsh5/
├── index.html   # 单页入口（5 屏全屏滑动 + 弹窗 + 分享引导）
├── css/
│   ├── style.css    # 主样式（金色 #fee248 点缀）
│   ├── swiper.min.css
│   └── animate.min.css
├── js/
│   ├── swiper.min.js         # Swiper 3.0.6
│   ├── swiper.animate.min.js # 页面切换动画插件
│   ├── jquery.min.js         # jQuery 1.7.1
│   ├── jquery.reveal.js      # 模态弹窗
│   └── wechatAPI.js          # 微信分享封装
├── img/         # 全套活动视觉切图（主视觉 / 赛程 / 按钮 / 云层星空背景）
└── src/
    ├── movie.mp4   # 宣传视频（×2 处播放位）
    └── music.mp3   # 背景音乐

快速开始

纯静态模板，无需构建：

# 方式一：浏览器直接打开
双击 index.html 即可体验（音乐自动播放需在微信或服务器环境）

# 方式二：本地静态服务器
python3 -m http.server 8080
# 访问 http://localhost:8080/

# 方式三：VS Code Live Server 插件，右键 index.html → Open with Live Server

建议在 Chrome 设备模拟（手机视图）或真机微信内预览，以获得完整翻页与分享体验。

二次开发指南

需求	操作
更换品牌	替换 img/ 下同名切图（主视觉、赛程卡片、背景云层 / 星空等）
修改文案 / 链接	直接编辑 index.html 内文字；分享配置在页面底部 wechat.shareData
更换主题色	修改 css/style.css 中的 #fee248（金色点缀色）
替换音视频	覆盖 src/music.mp3 与 src/movie.mp4 即可
增删屏	复制一段 <section class="swiper-slide"> 修改，Swiper 自动接管翻页

适用场景

歌手 / 选秀 / 才艺大赛活动页，比赛邀请函与赛程公布 H5，品牌营销全屏滑动页，周年庆 / 发布会宣传页，以及一切需要微信内传播的 H5 活动页。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	1~2 周起	换图换文案，1 天上线
动画品质	需反复调优	逐元素入场 + 视差翻页开箱即用
音视频体验	互斥逻辑易遗漏	音乐 / 视频 / 双视频互斥已内置
微信传播	分享需另行开发	分享引导 + 自定义分享内容已内置
维护成本	自行承担	单文件结构，改图即可迭代

在线预览

纯静态模板，将整个目录部署至任意静态托管（GitHub Pages / OSS / 云虚拟主机等）即可在线访问；部署到 HTTPS 域名后可在微信内直接打开体验完整分享链路。

http://8.166.93.126:8989/gsdsh5