「让制作 H5 像制作 PPT 一样简单！」

[Kamato]

Wechat-H5-Boilerplate

「让制作 H5 像制作 PPT 一样简单！」

Wechat-H5-Boilerplate(以下简称 WHB ）是一个 H5 动效模板，专门为微信优化，适合快速构建全屏滚动型 H5 宣传页。

例如让一段文字动起来只需要一行代码：

<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>

效果图：

实时预览：

使用手机访问下面的地址或扫描下方二维码

http://panteng.me/demos/whb

Github 地址：

https://github.com/panteng/wechat-h5-boilerplate

写在后面：

这个 H5 模板是我自己开发的，凝结了我在移动端开发的一些经验。开发这个项目的初衷是想将 H5 页面开发者从繁琐又无趣的项目准备工作和后期优化工作中解脱出来，将脏活累活交给机器去做，开发者只需要关心页面的逻辑和动画的控制。

我在开发文档中分享了一些我自己的心得和开发资源。这个项目在两个月前发布了第一个版本，收到了很多热心朋友的建议和反馈，在此感谢一下。

[x537196]

挺好的，但是还是觉得在网页上自动放音乐很突兀

[arens]

很好，最近正好要整两个微信站

[Kamato]

@x537196 我也觉得。无奈国情如此， H5 页面放音乐都成标配了。桌面端的网站我是轻易不会放背景音乐的，太打扰用户了。

[Kamato]

@arens 感谢支持

[franklight]

挺不错的，可惜我这个新手看不懂怎么用

[qile1]

我手机预览第一个界面猫咪有点偏左 30%，动下屏幕就居中了，魅蓝安卓手机

[Kamato]

@franklight 学一下 gulp

[Kamato]

@qile1 我没有你那型号的手机，所以没法测试，也许你可以换一个 CSS 定位方式，不一定要用我的方法。

[kanezeng]

给你加个星号先

[Kamato]

@kanezeng 感谢

[whisperer]

易企秀已经很成熟了啊

[hydyy]

mark

[popo233]

标题党啊，一般人做 PPT 是一行代码都不写的..

[aitaii]

H5
让制作 H 像制作 PPT 一样简单，就看不懂了。

[Kamato]

@hydyy 感谢支持

[Kamato]

@whisperer Maka 、易企秀是给非程序员用户使用的。

[Kamato]

@popo233 作为一个编程项目，底层的功能和逻辑都已经准备好，大部分后续优化也自动帮你做好，只需要你控制动画效果，这已经非常简单了。

[hoythan]

网页放背景音乐到底是哪个混蛋想出来的，现在微信朋友圈都是这种垃圾 H5 ，动不动来个音乐放几个图片，丑的想哭不说，内容展示方式也 OUT 。

[hoythan]

@hoythan 我指的垃圾并非 UP 主，不要误解。

[thenbsp]

很不错，已 Star ，另外我也做了很多微信上的开发项目，不过我主要是做后端，欢迎 Star https://github.com/thenbsp