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

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

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

5229 次点击
所在节点    分享创造
38 条回复
litpen
2016-05-13 23:37:33 +08:00
这只是一套项目代码，项目结构和搭建都很难让人家一下子理解和使用，楼主应该把它抽象成插件之类的，我也写过同类插件 https://github.com/lipten/slidePage
fhefh
2016-05-14 01:49:45 +08:00
nice
lslqtz
2016-05-14 07:54:54 +08:00
@Kamato 我认为桌面端可以考虑可开关音乐，移动端绝对不行。手机基本都是在外面刷的，没带耳机突然响起来你问问他和他身边的人什么感受？桌面端大部分是在家用的。
Kamato
2016-05-14 10:43:42 +08:00
@thenbsp 赞
Kamato
2016-05-14 10:46:13 +08:00
@litpen 其实全屏滚动泪的插件已经有很多了，比如 swiper.js ， fullpage.js 等。我这里只是提供一套比较完整的解决方案。
Kamato
2016-05-14 10:46:33 +08:00
@fhefh 感谢支持
Kamato
2016-05-14 10:48:02 +08:00
@hoythan 那些都是不懂设计的人用 MAKA ，初页等工具随意制作出来的，质量当然低
Kamato
2016-05-14 10:49:04 +08:00
@lslqtz 嗯，其实我想说，无论移动还是桌面，我都讨厌背景音乐
gogobody
2016-05-14 12:49:02 +08:00
喜欢
你的
头像
lslqtz
2016-05-14 15:43:14 +08:00
@Kamato 一些不太吓人的我可以接受 一打开就动词打次的我马上关页面。
Kamato
2016-05-14 21:42:04 +08:00
@gogobody Thx~ Willa Holland
Kamato
2016-05-14 21:43:47 +08:00
@lslqtz 嗯，因人而异了~
gogobody
2016-05-15 11:31:56 +08:00
@Kamato mark!
sobigfish
2016-05-15 12:26:11 +08:00
呃，桌面浏览器的滚动不支持
（ OS X 两指，大概鼠标滚轮一样）
Kamato
2016-05-16 00:09:10 +08:00
@gogobody 感谢～
echopan
2016-05-16 09:19:09 +08:00
谢谢，我正好需要这个
Kamato
2016-05-16 09:22:02 +08:00
@echopan 感谢支持～
Kamato
2016-05-16 09:34:20 +08:00
@Kamato
@sobigfish Swiper.js 默认是禁用鼠标滚轮控制的。你可以设置 mousewheelControl 为 true 试试。

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

https://tanronggui.xyz/t/277668

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

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

© 2021 V2EX