工行H5产品系统

面向银行理财、财富管理等金融机构的移动端营销传播场景。春节、开门红、周年庆等节点，机构需要在微信内快速触达客户，完成品牌露出、主题叙事与活动引流，又要兼顾合规表达与传播效率。

本项目以「工银理财 · 牛年工韵宏图」为主题，将品牌主张拆成可滑动浏览的竖屏长页：用户在手机微信中打开链接即可沉浸式阅读，无需下载 App。适用于节日营销、品牌故事页、产品主题宣传、渠道转发分享等场景，帮助金融机构在短链路内完成「打开—浏览—共鸣—分享」的传播闭环。

1. 资源预加载与开场引导
进入页面前预加载图片、样式、脚本与背景音乐，减少滑动卡顿；开场页引导点击进入，形成完整浏览节奏。

2. 竖屏长页沉浸浏览
基于竖向滑动的长页面叙事，按章节分段展示主题内容；滚动过程中触发入场动画，提升阅读节奏感与品牌氛围。

3. 动画与视听体验
结合 CSS 动画与切图动效，配合可开关的背景音乐；支持视频弹层播放，强化主题表达与互动感。

4. 移动端适配与体验保护
针对手机竖屏优化布局；横屏时给出提示，避免误触与版式错乱，保证微信内稳定浏览。

5. 微信分享传播
接入微信 JSSDK，自定义分享标题、摘要与封面图，便于转发好友与朋友圈，扩大活动触达范围。

6. 访问数据统计
接入页面访问统计，便于观察打开量与传播效果，为后续活动优化提供依据。

这是一个 工银理财 2021 牛年主题营销 H5，主题是「与工银理财共同开启牛年工韵宏图」，面向微信等移动端传播。

项目定位
典型的手机竖屏长页营销页：加载页 → 开启动画 → 纵向滑动浏览多段内容，并带背景音乐、视频弹层和微信分享。

技术栈
页面： 单页 index.html（无构建工具）
交互： jQuery 1.11 滑动 Swiper（竖向 freeMode）
预加载 / 音频： PreloadJS + SoundJS
动画： animate.css + 自定义 CSS
分享： 微信 JSSDK（wxconfig.php / jssdk.php）
统计： 百度统计