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

2016 年 5 月 10 日
 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 页面开发者从繁琐又无趣的项目准备工作和后期优化工作中解脱出来，将脏活累活交给机器去做，开发者只需要关心页面的逻辑和动画的控制。

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

5911 次点击
所在节点    分享创造
38 条回复
nimonew
2016 年 5 月 10 日
挺好的，但是还是觉得在网页上自动放音乐很突兀
arens
2016 年 5 月 10 日
很好，最近正好要整两个微信站
Kamato
2016 年 5 月 10 日
@x537196 我也觉得。无奈国情如此， H5 页面放音乐都成标配了。桌面端的网站我是轻易不会放背景音乐的，太打扰用户了。
Kamato
2016 年 5 月 10 日
@arens 感谢支持
franklight
2016 年 5 月 10 日
挺不错的，可惜我这个新手看不懂怎么用
qile1
2016 年 5 月 11 日
我手机预览第一个界面猫咪有点偏左 30%，动下屏幕就居中了，魅蓝安卓手机
Kamato
2016 年 5 月 11 日
@franklight 学一下 gulp
Kamato
2016 年 5 月 11 日
@qile1 我没有你那型号的手机，所以没法测试，也许你可以换一个 CSS 定位方式，不一定要用我的方法。
kanezeng
2016 年 5 月 11 日
给你加个星号先
Kamato
2016 年 5 月 11 日
@kanezeng 感谢
whisperer
2016 年 5 月 11 日
易企秀已经很成熟了啊
hydyy
2016 年 5 月 11 日
mark
popo233
2016 年 5 月 12 日
标题党啊，一般人做 PPT 是一行代码都不写的..
aitaii
2016 年 5 月 12 日
H5
让制作 H 像制作 PPT 一样简单，就看不懂了。
Kamato
2016 年 5 月 12 日
@hydyy 感谢支持
Kamato
2016 年 5 月 12 日
@whisperer Maka 、易企秀是给非程序员用户使用的。
Kamato
2016 年 5 月 12 日
@popo233 作为一个编程项目，底层的功能和逻辑都已经准备好，大部分后续优化也自动帮你做好，只需要你控制动画效果，这已经非常简单了。
hoythan
2016 年 5 月 13 日
网页放背景音乐到底是哪个混蛋想出来的，现在微信朋友圈都是这种垃圾 H5 ，动不动来个音乐放几个图片，丑的想哭不说，内容展示方式也 OUT 。
hoythan
2016 年 5 月 13 日
@hoythan 我指的垃圾并非 UP 主，不要误解。
thenbsp
2016 年 5 月 13 日
很不错，已 Star ，另外我也做了很多微信上的开发项目，不过我主要是做后端，欢迎 Star https://github.com/thenbsp

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.xtra.eu.org/t/277668

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX