「让制作 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>
使用手机访问下面的地址或扫描下方二维码
https://github.com/panteng/wechat-h5-boilerplate
这个 H5 模板是我自己开发的,凝结了我在移动端开发的一些经验。开发这个项目的初衷是想将 H5 页面开发者从繁琐又无趣的项目准备工作和后期优化工作中解脱出来,将脏活累活交给机器去做,开发者只需要关心页面的逻辑和动画的控制。
我在开发文档中分享了一些我自己的心得和开发资源。这个项目在两个月前发布了第一个版本,收到了很多热心朋友的建议和反馈,在此感谢一下。
1
x537196 2016-05-10 17:23:56 +08:00
挺好的,但是还是觉得在网页上自动放音乐很突兀
|
2
arens 2016-05-10 17:30:30 +08:00
很好,最近正好要整两个微信站
|
3
Kamato OP @x537196 我也觉得。无奈国情如此, H5 页面放音乐都成标配了。桌面端的网站我是轻易不会放背景音乐的,太打扰用户了。
|
5
franklight 2016-05-10 22:36:24 +08:00
挺不错的,可惜我这个新手看不懂怎么用
|
6
qile1 2016-05-11 08:13:21 +08:00 via Android
我手机预览第一个界面猫咪有点偏左 30%,动下屏幕就居中了,魅蓝安卓手机
|
7
Kamato OP @franklight 学一下 gulp
|
9
kanezeng 2016-05-11 13:19:11 +08:00
给你加个星号先
|
11
whisperer 2016-05-11 17:33:29 +08:00
易企秀已经很成熟了啊
|
12
hydyy 2016-05-11 23:00:50 +08:00 via iPhone
mark
|
13
popo233 2016-05-12 03:32:44 +08:00 via iPhone
标题党啊,一般人做 PPT 是一行代码都不写的..
|
14
aitaii 2016-05-12 09:31:36 +08:00
H5
让制作 H 像制作 PPT 一样简单,就看不懂了。 |
17
Kamato OP @popo233 作为一个编程项目,底层的功能和逻辑都已经准备好,大部分后续优化也自动帮你做好,只需要你控制动画效果,这已经非常简单了。
|
18
hoythan 2016-05-13 14:41:40 +08:00
网页放背景音乐到底是哪个混蛋想出来的,现在微信朋友圈都是这种垃圾 H5 ,动不动来个音乐放几个图片,丑的想哭不说,内容展示方式也 OUT 。
|
20
thenbsp 2016-05-13 23:37:13 +08:00
很不错,已 Star ,另外我也做了很多微信上的开发项目,不过我主要是做后端,欢迎 Star https://github.com/thenbsp
|
21
litpen 2016-05-13 23:37:33 +08:00
这只是一套项目代码,项目结构和搭建都很难让人家一下子理解和使用,楼主应该把它抽象成插件之类的,我也写过同类插件 https://github.com/lipten/slidePage
|
22
fhefh 2016-05-14 01:49:45 +08:00
nice
|
23
lslqtz 2016-05-14 07:54:54 +08:00 via iPhone
@Kamato 我认为桌面端可以考虑可开关音乐,移动端绝对不行。手机基本都是在外面刷的,没带耳机突然响起来你问问他和他身边的人什么感受?桌面端大部分是在家用的。
|
25
Kamato OP @litpen 其实全屏滚动泪的插件已经有很多了,比如 swiper.js , fullpage.js 等。我这里只是提供一套比较完整的解决方案。
|
29
gogobody 2016-05-14 12:49:02 +08:00 via Android
喜欢
你的 头像 |
34
sobigfish 2016-05-15 12:26:11 +08:00
呃,桌面浏览器的滚动不支持
( OS X 两指,大概鼠标滚轮一样) |
36
echopan 2016-05-16 09:19:09 +08:00 via Android
谢谢,我正好需要这个
|