未加星标

从网易《初心》H5 里学到的一些

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

这篇文章可以作为之前写的一篇

《技能之H5》的补充知识。
1、拖放

html5 标准的组成部分。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

draggable属性默认是开启的,如果不想被拖放,需要设置draggable属性为false,以防拖动,比如这个h5是这么设置的:

2、 图片素材

图片素材可以用拼成一整张,以减少服务器接口调用的次数


从网易《初心》H5 里学到的一些

3、Gif的用处

很多效果可以借助gif来实现,播放gif来实现三维效果,而不用真的加载个模型,在threejs里操作。


从网易《初心》H5 里学到的一些

4、glTF格式的文件

是一种可以减少 3D 格式中与渲染无关的冗余数据并且在更加适合 OpenGL 簇加载的一种 3D 文件格式。 threejs可加载,gltf文件长这样:


从网易《初心》H5 里学到的一些

5、 “扯”的实现:


从网易《初心》H5 里学到的一些

这个无码图是这样的:


从网易《初心》H5 里学到的一些

下面这些就是可恶的拖不完的马赛克:


从网易《初心》H5 里学到的一些

实现逻辑很简单:就是把上面这些小图片叠在无码图上。

6、 光影特效

一些光影特效可以用透明的png图片来实现,比如下面这个素材:


从网易《初心》H5 里学到的一些

7、 一个按钮的实现:


从网易《初心》H5 里学到的一些
从网易《初心》H5 里学到的一些

用了几张图片素材,通过点击事件来控制图片的透明度、位置:opacity、top、left、width等。

8、 “释怀”是一个canvas实现的:


从网易《初心》H5 里学到的一些

9、 拉链的特效

是一张张序列帧图片组成的:


从网易《初心》H5 里学到的一些

以上为全文内容。

至今为止,已经更新的各项技能:

使用Echarts制作可视化图表

技能之谷歌Chrome爬虫

技能之H5

技能之AR技术入门

5个用法,关于Gif。

技能之用iMovie制作预告片

本号发布内容主要为设计&科技方面

| 设计+科技=自在园实验室。


从网易《初心》H5 里学到的一些

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:从网易《初心》H5 里学到的一些
本站链接:http://www.codesec.net/view/532627.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(29)