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

这篇文章可以作为之前写的一篇《技能之H5》的补充知识。

1、拖放

HTML5 标准的组成部分。

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

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

2、图片素材

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

3、Gif的用处

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

4、glTF格式的文件

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

5、“扯”的实现:

这个无码图是这样的:

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

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

6、光影特效

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

7、一个按钮的实现:

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

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

9、拉链的特效

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

以上为全文内容。

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

使用Echarts制作可视化图表

技能之谷歌Chrome爬虫

技能之H5

技能之AR技术入门

5个用法,关于Gif。

技能之用iMovie制作预告片


本号发布内容主要为设计&科技方面设计+科技=自在园实验室。

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2016-12-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闰土大叔

西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双...

16730
来自专栏针针小站

【IFE】Day 1 – 百度前端技术学院 基础学院 学习笔记(一)

17560
来自专栏Material Design组件

Human Interface Guidelines — Interface Essentials

16670
来自专栏非著名程序员

Android:一个高效的UI才是一个拉风的UI

开篇 Android是一个运行在移动终端上的操作系统,跟传统PC最大的不同所在就是移动终端的资源紧缺问题“比较”明显,当然对于一些屌丝机型,应该用“非常“来形容...

28590
来自专栏老司机的简书

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

12920
来自专栏闰土大叔

回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 ...

41090
来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(上)

前言 在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年我还在想,假如有一天,前端世界里...

406120
来自专栏编程微刊

markdown模式的一些语法标题一

14210
来自专栏编程

前端零基础入门!前端真不难!

现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是...

23850
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

12430

扫码关注云+社区

领取腾讯云代金券