Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
Kamato

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

  •  1      
  •   Kamato ·
    panteng · May 10, 2016 · 6372 views
    This topic created in 3831 days ago, the information mentioned may be changed or developed.

    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>

    效果图：

    demo.jpg

    实时预览：

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

    http://panteng.me/demos/whb

    QR-Code.png

    Github 地址：

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

    写在后面：

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

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

  • 开发
  • 制作
  • 模板
  • ppt
    38 replies  •  2016-05-16 09:34:20 +08:00
    nimonew
    nimonew
    May 10, 2016
    1
    挺好的，但是还是觉得在网页上自动放音乐很突兀
    arens
    arens
    May 10, 2016
    2
    很好，最近正好要整两个微信站
    Kamato
    Kamato
    OP
    May 10, 2016
    3
    @x537196 我也觉得。无奈国情如此， H5 页面放音乐都成标配了。桌面端的网站我是轻易不会放背景音乐的，太打扰用户了。
    Kamato
    Kamato
    OP
    May 10, 2016
    4
    @arens 感谢支持
    franklight
    franklight
    May 10, 2016
    5
    挺不错的，可惜我这个新手看不懂怎么用
    qile1
    qile1
    May 11, 2016 via Android
    6
    我手机预览第一个界面猫咪有点偏左 30%，动下屏幕就居中了，魅蓝安卓手机
    Kamato
    Kamato
    OP
    May 11, 2016
    7
    @franklight 学一下 gulp
    Kamato
    Kamato
    OP
    May 11, 2016
    8
    @qile1 我没有你那型号的手机，所以没法测试，也许你可以换一个 CSS 定位方式，不一定要用我的方法。
    kanezeng
    kanezeng
    May 11, 2016
    9
    给你加个星号先
    Kamato
    Kamato
    OP
    May 11, 2016
    10
    @kanezeng 感谢
    whisperer
    whisperer
    May 11, 2016
    11
    易企秀已经很成熟了啊
    hydyy
    hydyy
    May 11, 2016 via iPhone
    12
    mark
    popo233
    popo233
    May 12, 2016 via iPhone
    13
    标题党啊，一般人做 PPT 是一行代码都不写的..
    aitaii
    aitaii
    May 12, 2016
    14
    H5
    让制作 H 像制作 PPT 一样简单，就看不懂了。
    Kamato
    Kamato
    OP
    May 12, 2016
    15
    @hydyy 感谢支持
    Kamato
    Kamato
    OP
    May 12, 2016
    16
    @whisperer Maka 、易企秀是给非程序员用户使用的。
    Kamato
    Kamato
    OP
    May 12, 2016
    17
    @popo233 作为一个编程项目，底层的功能和逻辑都已经准备好，大部分后续优化也自动帮你做好，只需要你控制动画效果，这已经非常简单了。
    hoythan
    hoythan
    PRO
    May 13, 2016
    18
    网页放背景音乐到底是哪个混蛋想出来的，现在微信朋友圈都是这种垃圾 H5 ，动不动来个音乐放几个图片，丑的想哭不说，内容展示方式也 OUT 。
    hoythan
    hoythan
    PRO
    May 13, 2016
    19
    @hoythan 我指的垃圾并非 UP 主，不要误解。
    thenbsp
    thenbsp
    May 13, 2016
    20
    很不错，已 Star ，另外我也做了很多微信上的开发项目，不过我主要是做后端，欢迎 Star https://github.com/thenbsp
    litpen
    litpen
    May 13, 2016
    21
    这只是一套项目代码，项目结构和搭建都很难让人家一下子理解和使用，楼主应该把它抽象成插件之类的，我也写过同类插件 https://github.com/lipten/slidePage
    fhefh
    fhefh
    May 14, 2016
    22
    nice
    lslqtz
    lslqtz
    May 14, 2016 via iPhone
    23
    @Kamato 我认为桌面端可以考虑可开关音乐，移动端绝对不行。手机基本都是在外面刷的，没带耳机突然响起来你问问他和他身边的人什么感受？桌面端大部分是在家用的。
    Kamato
    Kamato
    OP
    May 14, 2016
    24
    @thenbsp 赞
    Kamato
    Kamato
    OP
    May 14, 2016
    25
    @litpen 其实全屏滚动泪的插件已经有很多了，比如 swiper.js ， fullpage.js 等。我这里只是提供一套比较完整的解决方案。
    Kamato
    Kamato
    OP
    May 14, 2016
    26
    @fhefh 感谢支持
    Kamato
    Kamato
    OP
    May 14, 2016
    27
    @hoythan 那些都是不懂设计的人用 MAKA ，初页等工具随意制作出来的，质量当然低
    Kamato
    Kamato
    OP
    May 14, 2016
    28
    @lslqtz 嗯，其实我想说，无论移动还是桌面，我都讨厌背景音乐
    gogobody
    gogobody
    May 14, 2016 via Android
    29
    喜欢
    你的
    头像
    lslqtz
    lslqtz
    May 14, 2016 via iPhone
    30
    @Kamato 一些不太吓人的我可以接受 一打开就动词打次的我马上关页面。
    Kamato
    Kamato
    OP
    May 14, 2016
    31
    @gogobody Thx~ Willa Holland
    Kamato
    Kamato
    OP
    May 14, 2016
    32
    @lslqtz 嗯，因人而异了~
    gogobody
    gogobody
    May 15, 2016 via Android
    33
    @Kamato mark!
    run2
    run2
    May 15, 2016
    34
    呃，桌面浏览器的滚动不支持
    （ OS X 两指，大概鼠标滚轮一样）
    Kamato
    Kamato
    OP
    May 16, 2016 via Android
    35
    @gogobody 感谢～
    echopan
    echopan
    May 16, 2016 via Android
    36
    谢谢，我正好需要这个
    Kamato
    Kamato
    OP
    May 16, 2016
    37
    @echopan 感谢支持～
    Kamato
    Kamato
    OP
    May 16, 2016
    38
    @Kamato
    @sobigfish Swiper.js 默认是禁用鼠标滚轮控制的。你可以设置 mousewheelControl 为 true 试试。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2589 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 61ms · UTC 00:28 · PVG 08:28 · LAX 16:28 · JFK 19:28
    ♥ Do have faith in what you're doing.