纯前端实现可传图可字幕台词定制的GIF表情生成器

2018年05月4日 by 张 鑫旭 阅读 13992 次, 今日 85 次

这两天晚上在家自己做了个可以传图,可以写台词的GIF表情图生成器。可以使用提供的模板,也可以自己传图制作,关键是纯前端实现的,这个有点厉害了,有兴趣可以进来看看。

阅读全文…

炫酷H5中序列图片视频化播放的高性能实现

2018年05月1日 by 张 鑫旭 阅读 11851 次, 今日 61 次

很多爆款H5的一些酷酷的场景变换很多都是视频实现的,但是,视频的实现也有局限,如iOS下不能自动播放,动态数据不支持等,此时又当如何处理呢?

我们可以使用序列图片,通过JS脚本,来模拟视频播放效果,以上所有局限将通通可以规避。实现的方法很多,但是很多平时可以的方法在这种场景下会有性能跟不上的问题,那有没有什么高性能的实现方法呢?有……

阅读全文…

JS检测PNG图片是否有透明背景、抠图等相关处理

2018年05月1日 by 张 鑫旭 阅读 9818 次, 今日 57 次

用户上传图片,如果是PNG图片,有时候我们希望这张PNG图片背景不要是透明的,有时候又希望是透明的,有没有什么方法可以直接在前端就检测出是否是含透明区域的图片,以及做出相关的体验优化处理呢?如果非透明图片想要非常方便快速变成透明图片,又当如何处理呢?本文会提供详尽的解答,丰富的配图,必要的源代码,希望本文的内容能够对您的学习有所帮助!

阅读全文…

文章文档标题自动生成导航jQuery小插件titleNav.js

2018年04月30日 by 张 鑫旭 阅读 6894 次, 今日 59 次

技术文档,或者一些官网首页,重展示,基本上都是一个<section>一个<section>的段落组成,每个段落会有一个标题,此时页面往往会很长很长,如果用户阅读时候关心的只是中间某个段落,则交互体验并不友好,此时,就需要有一个页面内的标题导航,用户直接点击导航菜单,就能定位到对应的标题,此时阅读起来就省心多了……

阅读全文…

Service Worker实现浏览器端页面渲染或CSS,JS编译

2018年04月24日 by 张 鑫旭 阅读 8291 次, 今日 58 次

Service Worker提供了一种能力,可以fetch请求的资源,然后后Service Worker中进行编译或转化,返回处理后的其他资源,这种特性可以用来实现各种资源的在线的客户端编译,本文就将抛砖引玉,通过两个应用案例,展示未来web开发可能的面貌。

阅读全文…

简单了解ES6/ES2015 Symbol() 方法

2018年04月10日 by 张 鑫旭 阅读 9651 次, 今日 56 次

Symbol是JavaScript ES6新出现的一个的原生数据类型(primitive data type),作用是什么?有什么特性?本文就将简单介绍相关知识,希望能够对您的学习有所帮助。

阅读全文…

小tips: 纯前端JS读取与解析本地文本类文件

2018年03月27日 by 张 鑫旭 阅读 11106 次, 今日 21 次

所谓文本类文件,指MIME Type为text/*文件,例如,CSS文件(text/stylesheet),JS文件(text/javascript),HTML文件(text/html),txt文本(text/plain)等等。

在现代浏览器下,我们可以直接对这些文件进行处理,无论是通过type=file表单元素还是从桌面拖拽到网页中都是可以的……

阅读全文…

AMCSS(CSS属性模式)开发简介

2018年03月25日 by 张 鑫旭 阅读 6181 次, 今日 7 次

AMCSS是Attribute Modules for CSS的缩写,表示借助HTML属性来进行CSS相关开发。传统我们多个模块特性是通过多个类名进行控制的,而AMCSS则是基于属性控制……

阅读全文…

秀几种CSS背景渐变图片transtion过渡效果技巧

2018年03月25日 by 张 鑫旭 阅读 11810 次, 今日 18 次

background-image不支持CSS3 transition,因此,当CSS3 gradient渐变作为背景图片存在的时候,直接设置transition是不会有过渡效果的,那该怎么办呢?

阅读全文…

借助SVG文字尺寸自动缩放甚至突破Chrome 12px限制

2018年03月24日 by 张 鑫旭 阅读 5886 次, 今日 21 次

文字大小尺寸跟着容器的尺寸变化。这对于一些需要尺寸自适应的slogon内容就很实用,例如移动端320~414宽度间的自适应。纯CSS可以实现,但如果局部自适应实现就比较麻烦,canvas则效果不好,SVG实现则兼顾两者的优点……

阅读全文…