在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
手指上滑的时候怎样才能禁止整个页面拖动起来?阻止body touchmove默认事件不行, 那样就不能上滑了.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
记得alloy team大会上有人问过，你可以去看看，网址。如果没有，那估计就记错了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这是布局设计的问题 不应该和滑动显示有关系 底部都各种按钮（客服 收藏 加入购物车 返回顶部）这些应该写成fixed 永远置于页面底部 同时这些的z-index也应该高于你图文介绍 最后页面主题内容也应该有一个min-height防止页面内容过少 确保撑开页面
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。教程 | H5 深度玩法总结，让你的 H5 获得病毒扩散效益
扫描,分享朋友圈
风靡营销圈的H5已经不仅仅是一个展示工具，现在几乎所有品牌都会利用H5技术制作大量视觉丰富夺目的小应用、小游戏，以期获得病毒扩散效益。甚至我最近都收到了H5的简历，应聘的小哥直接发了个二维码过来，虽然这种简单的套模版连我这种小copy都会做，但这种自我推销的创意值得点个赞！
然而，我大红坊的技术汪们表示，还有很多酷炫到没朋友的H5你们都还没见识到好吗！
接下来，请跟我左手右手一个慢动作，开启H5花样玩法的神奇大门！
来源：（微信号：redworks2013）
原标题：H5深度玩法来袭！前方高能请注意！
Part 1、H5不可替代的三！大！技！能！
1、绘图功能
其实大伙儿在很多H5中看到的动画效果就是用H5的绘图功能做的，比如前段时间我们为雀巢做的一个案例。（活动链接暂缺）
2、三维效果
H5的华丽效果还离不开一种叫CSS的技术，如果有人熟悉互联网技术的命名规则（好吧估计也没多少人知道）应该能知道CSS3就是CSS的打怪升级版。
在CSS3中有个非常牛逼的功能是三维渲染，也就是说在H5中能做出3D动画甚至3D游戏（感觉以后可以直接在H5上看侏罗纪了）。目前在H5中CSS3 3D的应用比较少，这个很有可能会成为下一个营销类H5应用的爆点哟，小皮鞭什么的可以甩起来了！
下面这这个案例就是用H5+CSS3 3D做的（也就是我们做的啦）
点击查看数英网相关链接：
3、离线存储
H5的另一个重要特性就是离线存储，它能将用户的资源文件保存在本地，这样在页面加载的时候网页能尽情地使用本地资源，从而实现离线状态下访问网页应用。举个例子，通过离线存储，你可以在没有网络的情况下阅读公众号的文章（当然这只是技术上可行，微信暂时没有此功能，看到这篇文章的腾讯技术汪们赶紧完善一下吧）
而且离线存储这个功能很牛X的一个地方是，假设离线存储的容量是100个G甚至更多，浏览器就变成了一个超级应用入口，所有网页应用都具备离线存储和在线浏览的功能，这时候在线Office、在线记事本甚至在线PhotoShop都可以实现，我们的电脑只需要装一个程序——浏览器。也就是说，可能在不远的将来，浏览器将干掉Windows，一切用户操作都在云端进行！（这真不是纯粹的脑洞大开……）
Part 2、H5 接地气的三！大！玩！法！
1、幻灯片式玩法
以下英航和Moto的例子相信很多人都看过，精美的图片设计+简单的翻页效果，原来微信营销可以这么玩，但很快，类似的H5就像国民老公王思聪的老婆一样遍地开花了，还记得它们吗？
这是H5最早期也是最典型的玩法，因为虽然简单但很实用又拿得出手，所以至今还很流行。效果呢就是简单的图片展示&翻页交互，看起来会很像屁屁踢展示，但是尊的很直白美观啊！
其实幻灯片式的H5现在已经出现了很多在线制作软件供和我们这种手残星人使用（别装了我知道你也是），所以制作成本在现在看来几乎是等于零的，而在之前这样一个应用的开发可能要将近一万。当然啦，这对于品牌来说是一个好事，因为很多时候这种简单的展示已经能满足需求了，不需要再花费不必要的预算。
由于制作简单，周期短，这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话，不需要任何开发，你只需要要配备一名设计和文案。
1、定期发布的内容，几乎零预算。
2、结合热点的营销，周期极短。
2、交互式动画玩法
除了这种叙事型的H5动画，我们能看到的大多数H5游戏也都属于交互式动画玩法，比如围住神经猫、打企鹅、2048（想当初真是玩的根本停不下来好吗）等等。最近也有一个比较火的H5游戏叫，在这个游戏中用户扮演包子铺的创业者，在事业发展的不同阶段做出经营决策，最终成为CEO赢取白富美登上人生巅峰。虽然游戏中植入了赤果果的产品推广（知乎的一本新书），但最后还是取得了3天破300万PV的成绩。
点击查看：
这些类型各异的H5应用，本质上都是基于H5的动画技术做的。它们所涉及的相关动画技术主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的动画效果还是用JS实现的，实现的效果类似屁屁踢中的动画功能，只能实现元素的平移、旋转、隐现等等，而事实上通过JS+Canvas/SVG+CSS3就可以实现cool到飞起的交互式动画。
可是可是，费了九牛二虎之力做出来的H5动画不造长啥样可真是哔了狗了，为了更好的保护动物，我决定隆重推出此款神器：
H5在线预览网站：
在这个网站中，你几乎能看到所有H5能够实现的动画效果，下次如果需要做H5的时候就可以一脸傲娇的跟开发说「你看，就是这个效果」。
交互式动画类型的H5制作周期和成本比较高，需要提前规划。除了创意、文案、设计这些以外，开发周期较长，优质的H5大约在两周到4周左右，也有可能更长。
因为复杂交互做出来的效果，在用户看来只有完美和垃圾两种层次，所以请一定要慎重行事找个靠谱点的制作团队。当然如果你自己要花血本自建团队我也拦不住你啦——产品经理、设计师、前端工程师、PHP工程师（涉及表单、登录、评论等元素的时候需要），各一枚就够，这就是土壕公司的工作节奏啦！
1、中小型活动/品牌事件的传播，预算不多、周期较短。
这种情况一般就是某些新品发布、企业招聘、公关事件、中型会议等的传播。此时你需要权衡周期和成本的因素。
2、大型活动/品牌事件的传播，预算充足、计划性强、周期较长。
因此无论大家看到多牛逼的作品都要冷静冷静再冷静，千万不要盲目跟风也来做做做，其实像这种交互与故事一体的应用，如果时间不够只完成一半，整个H5基本是没法儿用的。这也是为什么有很多供应商无法在指定时间交付的原因，可能一开始就陷入了impossible mission的困境还幻想自己是阿汤哥呢。
3、功能型玩法
看一下以下的两个例子，第一个是百度针对地铁涨价做的H5，它可以计算你每天坐地铁要多少钱并实时显示大家的评论，我当时还上去吐槽了几句咩哈哈；第二个是STC的社交移动风云榜，很简单，就是精品H5的展示：
点击查看：& & & & & & & &
这两个H5都有一个特点，除了针对受众的热点内容传播以外，它们很像一个「供用户重复使用」的产品，这就是所谓的功能型H5。
功能型H5的独特价值在于，除了具备传播性以外，它通过用户的重复使用行为使得H5的传播是一个持续不断的过程。
小编觉得吧，web应用肯定是未来发展的方向，就像上文所说的，很有可能未来的操作系统将被浏览器所取代，服务和应用将进入完全的云世界。当然距离这种假设还比较远，有一条亘古不变的准则，就是聚焦于用户需求。
我所说的功能型H5，是同时聚焦于用户需求并且注重传播性的H5轻应用，也就是在设计H5的时候除了考虑传播的问题以外，也要思考如何把它变成一个持续运营的产品。这里面其实是思考角度的改变，从「我要传播什么」到「我希望用户传播什么」的转变。
轻交互重功能的功能型H5制作周期较短、成本也不高，成功的关键不在于酷炫的交互，而在于用户需求的把握以及后续的运营。
1、品牌账号的粉丝运营。
功能型H5由于具备一定的产品特性，其最大的价值就是提高粉丝活跃度和忠诚度。我们需要根据本身品牌的形象定位以及受众的特性设计功能型H5，要将品牌或产品的功能性特征抽象到生活方式或者精神追求的层次，听起来就很屌啊有木有。
事实上，以粉丝需求为中心的功能型H5将潜移默化的提升品牌影响力，在提升忠诚度的同时带来持续的口碑传播。
2、结合热点内容的品牌传播。
这种类型的传播是最常见的，但是往往很多结合热点的H5传播都是一次性娱乐消费，看过即忘。其实如果能从用户需求挖掘和产品运营的角度去思考，许多针对热点的H5传播都有很大提升的空间噢~
Part 3、H5带给用户的三！大！福！利！
1、大幅降低使用门槛
为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因很多用户都是晚期懒癌患者。为了满足这帮懒蛋的需求，H5当之无愧地成为不二之选。
2、实时更新、差量更新的优秀体验
HTML5应用可以绕开应用市场的限制进行自主实时更新，用户可以快速享受新服务。而且这种更新完全可以是差量更新，比如某个HTML页面或某个js文件有问题，只更新一下几个几k的小文件就可以了，这比原生应用的更新体验好得可不只一点半点。
3、跨应用的使用体验
目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心真的很他喵的影响效率和体验啊！用户想出差去三亚，必须得先打开去哪App订票，然后切回桌面，再找到并打开天气App，搜索输入三亚，再切到桌面，找到并打开航旅纵横App，输入航班号值机，哦对了，航班号多少来着又忘了，再切到桌面，找到并打开去哪App看航班号，最后找到并打开租车App，输入租车地点，然后再切回桌面。天啊这还没出差已经累的半死了……
但是没办法啊，在原生应用体系下，用户只能这样。不过高潮来了！有了H5，他不需要切回桌面，他可以在App间方便的直接飞来飞去，而不是使用一个一个孤岛App；他更不用费劲儿反反复复的输入数据，应用间可以方便的互相传递数据，帅到没朋友！！
虽然这种模式需要一点想象力，但未来迟早会实现。
数英转载规范*文章为作者独立观点，不代表数英网立场
1.在转载文章开头与结尾标注“文章作者”、“来源：数英网”并附上本文在数英网的链接；2.在文章结尾加上介绍：数英(digitaling.com)是数字媒体及职业招聘网站，探讨品牌营销、市场传播、广告创意设计等；3.如果作者注明不能转载及需要授权的，请联系作者本人！
扫描,分享朋友圈
|后参与评论
该用户邮箱不存在,请重试！
请输入密码！
资料更新成功！
还可以输入300字
您为什么要举报此信息？
请输入举报内容
关注微信，一起数字进行时
手机扫一扫，下载数英APP
手机扫一扫，下载数英APP设计师装逼指南：如何让我在打开H5的瞬间爱上你？
互联网从业者的专业岗位助手！
对素材做简单处理、组合就做出逼格高的H5页面设计的窍门。
顶着老板/甲方日夜催设计稿的压力，我猜总有哪一天你感觉灵感枯竭，挠破头皮想办法获取更多新鲜、高端的设计灵感以便能捉住用户的胃口... 有没有什么捷径，可以通过对素材做简单处理、组合就做出逼格高的设计？
有！比如以下七类：
1.线条+动效=高科技感的设计
2.插画+霓虹灯=魔幻色彩的设计
3.GIF+交互控制=实时的互动体验
4.PSD+动效=活泼的动画
5.线条+时间轴=可视化的运动
6.漫画+分镜框架=有力的信息表达
7.GIF+GIF+GIF=强大的视觉冲击
嗯，快看看下面的独门秘籍吧——
一、由线条&动效组成的高科技感观
在页面上，用一些简单的线条、圆框结合深色背景，这形成的视觉反差立马就吊起了用户的胃口啊！
而制作上其实是很简单的，主要是把素材无彩色化（白、灰）放在黑色/深色系背景中，然后用附上动效的纯颜色的线段、圆圈对素材加以修饰。
科技视觉效果的设计配色参考：
用于配合的动效推荐：旋转&回旋、闪烁、跳动、线段延伸&素材渐变（时间轴动画）
在iH5发布的《探寻007座驾的秘密！》案例，就用了相类似的技法——把汽车素材处理成偏灰色调并放置下深色系背景上，以加上“闪烁”动效的线条来对汽车的各个部件进行提示，视觉效果和科技感都十分到位。
▲iH5案例《探寻007座驾的秘密！》
二、加点霓虹色素材秒变艺术范
简单的一张图片，抠掉某个部分换成霓虹灯的动画，你猜会怎么样？闪瞎眼！
这种形式展示出的就是艺术范（逼格已到账）。其背后的设计套路也很简单——霓虹化素材叠加+时间轴动画/特定动效： 把底层素材在相应位置堆砌形成层次化，再把需要霓虹效果化的素材单独抽出进行色彩处理，最后把某些局部素材用时间轴功能进行微动控制；亦或者可以直接使用动效——闪烁、向某方向飞出等，以达到想要的效果。
三、谁说GIF不能用交互来控制？
“与其让我马上看到结果，不如让我细细品味过程。”这话虽然矫情，可挺在理的！连GIF播放过程能控制那得多浪漫。
这种有演变过程的GIF配合上一定的交互动作，可以激起用户的好奇心，并使作品更具吸引力。（例如上图可以设计成用户做出点击/滑动等手势后GIF开始播放，破茧成蝶。） 你可能会问：“GIF是自动播放的啊，怎么加交互来触发？”。
对，GIF是自动播放的，我们不能直接在它身上做交互联动，但我们可以转个小弯路来控制它——把GIF用图片序列上传。
如果是视频的话，还可以把各帧导出，打包成Zip压缩包。
然后把GIF或压缩包用编辑器上的图片序列功能上传，属性上根据实际需求设置即可（关键设置点：播放次数、时间间隔）。
把图片序列的自动播放关闭，然后通过一定的事件逻辑触发其播放，这样就实现了用交互来控制GIF的效果啦。
例如在页面上通过图片序列导入上面这两个GIF素材，通过一定条件的触发，让少女睁开眼、让少女回眸&树叶落下，只需一点小脑洞就可以让用户瞬间喜欢上你的作品啊！
四、独立元素的动效联动
你以为只有马里奥动吗？身边的东西都会跟着他动...
形式上是用PS处理好素材后，直接导入PSD，然后对各个独立的元素用常见的动效加以修饰：
动效循环播放，整体画面变成较为幽默的动画。另外，我们也可以对各元素的动效设置“延迟播放”，并用一定的交互逻辑加以触发，使整体动效展示出的效果更具联动性和交互性。
除了上述的画面内多个动效间联动，还可以把内容和动效放一块儿：用户滑动页面，其他独立素材的淡入淡出等动效会随着内容的改变而改变。
五、可以看得见的素材运动轨迹
“骚年，你试过身体被线缠绕的快感吗？”额..这不是捆绑别想歪...
上述三张图是来自iH5官网注册页面的一个有趣的短视频，这种形式可以说相当特别，把素材的运动轨迹可视化之余，还有效地把用户的目光留在页面中，一定程度上提高用户留存率。
但不足之处也比较明显：操作繁琐度比较高，如果想要更炫酷的效果——点击某地方，所有线段才依次显示，这就要把一条线段都放在时间轴下统一控制（包括透明度和位移等），这会逼死强迫症患者的...
六、用插画/漫画代替页面，用对话代替内容
简单的漫画让大家看得乐此不疲，还让广告植入得毫无防备！
这种玩法对设计能力要求会相对高一点——设计带有剧情的漫画故事。主要玩法在设计好的漫画中，将其他独立的素材添加进去并对其进行加工：局部色彩填充、模糊效果等，尽量把每一个分镜变得有趣起来，最后就是添加关键的动效以及交互了。
▲iH5案例《怎样的奔跑方式才能到达顶端》
七、玩的就是后现代主义视觉
在页面上放一个炸裂的耶稣，你猜会有什么效果？惊艳啊！
目标受众是年轻人的话可以考虑这种形式，特别适用于BGM特强、有节奏感的案例。
有很多音乐节承办方跟设计师Wingz合作，她在iH5设计发布的H5很多都是采用这种技法，达到的视觉效果都超赞！
在文章的最后，还是语重心长地唠叨一句：在设计时切忌把重心全部放在逼格实现，而忘了整体的质量，不能捡了芝麻丢了西瓜！
作者：尼姑拉丝赵四
原文地址：http://www.ui.cn/detail/166201.html
推荐阅读：点击下方文字即可阅读
点击下方“阅读原文”下载硅谷堂APP，定制专属的岗位知识学习！
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点干货分享：比iH5制作H5动效更简单的方法 - 产经要闻 - 科技讯
干货分享：比iH5制作H5动效更简单的方法
【科技讯】2月23日消息，众所周知，一个元素，动态往往会比静态更加吸睛；如果将这个元素放到H5中，适当的动态效果肯定能给用户带来更加的浏览体验；一个H5宣传页，配合酷炫的动效定能助力企业产品传播和品牌的打
【讯】2月23日消息，众所周知，一个元素，动态往往会比静态更加吸睛；
如果将这个元素放到H5中，适当的动态效果肯定能给用户带来更加的浏览体验；
一个H5宣传页，配合酷炫的动效定能助力企业产品传播和品牌的打造。
自从2014年以来，小到页面加载动画，元素动效，大到各种一夜爆红的H5案例，H5动画效果几乎红遍了大江南北，而动画效果设计一直以来又是设计师的专属领域，对此很多用户或者企业都会好奇，这些H5动画特效是怎么制作，或者如何可以做出这样的动画特效，因此本文将会通一些案例，与大家一起挖掘H5动画特效的制作方法。
这里先为大家揭秘制作H5的动效所要用到的，那就是现在比较热门的H5制作工具iH5和凡科微传单。由于H5页面（包括页面上的元素）和动画特效两者都是相依相随的，所以在制作H5页面的过程，就应该考虑到页面中的信息是以怎样的动效方式展示在用户面前，这时就需要用到H5制作工具为H5页面设置各样的动画效果。
iH5制作动效的常规方法
iH5可以制作移动端或电脑端的H5页面，优势在于能够制作出非常复杂的动画效果。在制作H5动画特效上，iH5提供了比较多元化的设计方式，例如设计师比较熟悉的时间轴、运动轨迹、画布，还有程序员熟悉的计数器、事件组、对象组等。
不过要在iH5上实现动画效果的制作，并不是随意用上一个组件就可以完成的，要完成整个H5页面的动画效果协调，需要综合利用不同的组件才能制作出一连串的H5动效。
例如，以一个普通的时尚展示H5为例，制作这样的H5动效，需要在H5页面的舞台上建立出时间轴、轨迹、滑动时间轴、事件等，建立出这些组件以后，通过层级关系在对象树中将H5页面元素进行排列，再按照逻辑关系设置并调整好元素的时间轴、轨迹、事件的参数，才能完整的构造出H5页面中所见到的动画特效。
凡科微传单制作H5动效的简化方法
如果对上面iH5的动画特效制作方法不是很懂，那下面这个制作方法，就能将复杂的问题进行简单化的处理。在凡科微传单上，几乎没有复杂的组件功能，而且将H5动效抽离成单独的动画元素或H5单页模板供用户选择，使得为H5页面制作动效降低了不少难度，同时也提升了H5的制作效率。
例如，同样是制作一个时尚展示的H5，凡科微传单的动画特效制作并不需要像iH5那样经过多个组件组合才能构成完整的动效，而是能够通过选定H5页面上的素材，直接添加上单独的动画元素，从而完成H5页面中动画效果的制作。除了单独动画元素的添加之外，还能通过H5单页模板的加入，为H5增加动效模板，用户只要编辑替换动效模板上的文本和内容，就可以直接应用单页模板的H5动效。
综合来看，iH5和凡科微传单两种H5制作工具的H5动效制作，其实也是各有利弊的，在iH5上制作的H5特效虽然复杂困难，耗时较长，但它在H5动效制作的自由度和发挥空间相对会更广；而凡科微传单的H5特效制作在操作性、效率和简易度上则是有比较大的优势，只是在动效的创作性上受到一定局限罢了。总之，用户可以根据自己的H5制作需求，选择合适的H5动效制作工具，以更好的制作出惊艳的H5动画特效。
换一换
12-18 18:11
12-18 17:53
12-18 17:47
12-18 17:32
12-18 17:30
11-23 12:13
11-09 16:42
10-26 16:31
07-11 16:32
08-06 16:17
12-18 20:46
12-18 20:37
12-18 19:56
12-18 19:50
12-18 19:28
12-18 17:32
12-18 17:23
12-18 17:13
12-18 17:06
12-18 16:50
12-18 16:35
12-18 16:21
12-18 16:09
12-18 16:11
12-18 15:42
12-18 15:34
12-18 15:30
12-18 15:20
12-18 14:36
12-18 13:58
12-18 13:43
12-18 12:03
12-18 11:57
12-18 11:50
12-18 11:46
12-18 11:28
12-18 11:20
12-18 10:33
12-18 10:39
12-18 10:26
& 科技讯版权所有