V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
Kamato

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

  •  1
     
  •   Kamato ·
    panteng · May 10, 2016 · 5808 views
    This topic created in 3641 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 页面开发者从繁琐又无趣的项目准备工作和后期优化工作中解脱出来,将脏活累活交给机器去做,开发者只需要关心页面的逻辑和动画的控制。

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

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