V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2920 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

开发

制作

模板

ppt

38 条回复 • 2016-05-16 09:34:20 +08:00

x537196

2016-05-10 17:23:56 +08:00

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

arens

2016-05-10 17:30:30 +08:00

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

Kamato

2016-05-10 18:01:54 +08:00

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

Kamato

2016-05-10 18:02:22 +08:00

@arens 感谢支持

franklight

2016-05-10 22:36:24 +08:00

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

qile1

2016-05-11 08:13:21 +08:00 via Android

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

Kamato

2016-05-11 09:43:00 +08:00

@franklight 学一下 gulp

Kamato

2016-05-11 09:46:59 +08:00

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

kanezeng

2016-05-11 13:19:11 +08:00

给你加个星号先

Kamato

2016-05-11 15:28:51 +08:00

@kanezeng 感谢

whisperer

2016-05-11 17:33:29 +08:00

易企秀已经很成熟了啊

hydyy

2016-05-11 23:00:50 +08:00 via iPhone

mark

popo233

2016-05-12 03:32:44 +08:00 via iPhone

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

aitaii

2016-05-12 09:31:36 +08:00

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

Kamato

2016-05-12 10:09:09 +08:00

@hydyy 感谢支持

Kamato

2016-05-12 10:10:16 +08:00

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

Kamato

2016-05-12 10:15:57 +08:00

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

hoythan

2016-05-13 14:41:40 +08:00

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

hoythan

2016-05-13 14:43:41 +08:00

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

thenbsp

2016-05-13 23:37:13 +08:00

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

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 via iPhone

@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 via Android

喜欢
你的
头像

lslqtz

2016-05-14 15:43:14 +08:00 via iPhone

@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 via Android

@Kamato mark!

sobigfish

2016-05-15 12:26:11 +08:00

呃，桌面浏览器的滚动不支持
（ OS X 两指，大概鼠标滚轮一样）

Kamato

2016-05-16 00:09:10 +08:00 via Android

@gogobody 感谢～

echopan

2016-05-16 09:19:09 +08:00 via Android

谢谢，我正好需要这个

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 试试。