当前位置:主页 > SEO工具 >

干货!如何做一个让人闻风丧胆的Html5页面

作者: 奕星SEO 分类: SEO工具 发布时间: 2019-10-19 14:06 内容来源:网络整理阅读量:

  总结笔记分享出来,将设计动效、具体实现方法、踩到的一些坑都完整梳理了一遍,全文高能干货,强烈建议学习哟!

干货!如何做一个让人闻风丧胆的Html5页面

  H5页面,总是心痒难耐,也想做有着酷炫动画和带感声效的 H5 呢。回想到做鬼节活动页的时候,接近午夜零点还在调整页面效果,看着页面上渐隐渐现的可怕画面,活生生吓到了自己,也是蛮难忘的。作为刚刚来到活动页新手村的朋友,踩到了一些坑,所以让我进入正题吧。哦,等一下,请先扫一下二维码啦~

干货!如何做一个让人闻风丧胆的Html5页面

干货!如何做一个让人闻风丧胆的Html5页面

  zoom或者transform: scale(x)拉伸页面或者拉伸元素。在实际开发的时候,我一度对这两个属性的用法产生混淆,所以作些了研究,稍后会详细说说这两个属性。

  perspective和perspective-origin这两个属性了,虽然教程和分享都看过不少,但真正写起来还是有一些摸不着头脑,各种搜索关于 3D 动画的解释之后我认为原理大概是这样的:

  磁带被分成了3个部分,磁带底部,磁带封面和磁带。其中封面和磁带是正视图,需要使用 3D 旋转,让这两个元素“躺下去”,而且为了保证这三个元素之间不会因为屏幕的缩放,出现错位的问题,需要保证磁带封面和磁带的定位是基于磁带底部的。其实磁带上还有两片盖子,不知道大家有没有注意到。其实这个盖子是左右对称且中心对称的,所以完全可以只用一张图片完成这样的效果,用

干货!如何做一个让人闻风丧胆的Html5页面

  这个活动页面我个人最喜欢的地方就是星星砸下去的动画,感觉所有的戏份都在它身上。开始的设想只是星星砸下去,感谢在制作过程中,经验丰富的同事所提的建议:星星砸下去的时候要有灰尘溅起或者火星四溅的效果。后来和设计商量,最后用了灰尘溅起的效果。不过本来还想做,星星背后的铁板应该要有震动的效果。由于时间关系,震动的效果有点不好添加,所以放弃了,这一点感觉有一些遗憾。可能页面新手的经验不够,很多动画的效果因为有限的想象力所以不太完善。这个时候和身边经验丰富的同事请教是很有效的方法。同时,一定要多看 B 站拓宽视野才行哦。

干货!如何做一个让人闻风丧胆的Html5页面

  svgartisan降临,做页面的时候总想加上一点 SVG。然而这个蓝色线条上有特效,所以用 PS 导出 SVG 后还要做二次处理才能还原设计稿上的效果,而且 SVG 的代码你懂得,它总是有点长。其实有个简单粗暴的方法:改变蓝色线条的图片宽度,虽然这个方法从性能上看并不好,但考虑到这个页面也只有这里发生了重绘,所以还是用图片+宽度控制来实现了。

  Android 上坑多,不要一次应用太多新技术。比如在魅族上用 flexbox 布局,就要加上 display: -webkit-box。还有一个教训就是,页面果然应该做一个测试一个啊QAQ。因为这个项目是重构和前端并行开发的……把伪元素改成实际 DOM 元素的时候,是怀着一颗对不起前台的心的。

干货!如何做一个让人闻风丧胆的Html5页面

  现在不管是活动页的设计稿还是产品页的设计稿,逐渐以 375×667 的 iPhone6 为基础。但是实际生活里,这些页面是会出现在细细长长的 iPhone5、480px 高度的 iPhone4 还有大屏幕的 iPhone 6+,更不要说在三星小米魅族一加等等等等尺寸都不知道怎么办才好的 Android 系列上打开会是什么gui。

干货!如何做一个让人闻风丧胆的Html5页面

  也就是说,使用相同的 zoom 值,满足了 iPhone5 的页面效果,但是在 iPhone4 上,按钮就会偏底,页面整体感觉也偏底。但是 zoom 值不能随便更改,否则红框中的录音机图片的左右边界就会显示出来。所以要针对 iPhone 4 调整元素的之间的间距,最终的效果大概是这样的:

干货!如何做一个让人闻风丧胆的Html5页面

  可以看得出效果并不是很好,整个页面非常的拥挤,所以在这个情况下,我觉得用统一 zoom 值来调整有点一棍子打倒了,如果一个个元素微调,那么最好效果会好得多。加上 zoom 会有一定的性能问题,组里的同事有些是 zoom 调整,也有给每个元素加 class 通过 transform: scale() 调整的。重构最神奇的就是,条条大路通罗马,怎么样都能达到自己想要的视觉效果,但是中间会因为各种原因,实现的方式不太一样。


本文链接地址:http://www.seohuizhou.com/seogongju/14551.html
上一篇:<<山东小程序定制开发如何选择
下一篇:C语言编程中的“堆”和“栈”七大不同之处>>