Everything you care about in one place

Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.

Get Feeder

zhangxinxu.com

张鑫旭-鑫空间-鑫生活

Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.

Follow now 168 followers

Latest posts

Last updated about 20 hours ago

Pixi.js中ColorMatrixFilter自带滤镜效果一览

about 20 hours ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11393 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、背景 短视频投放为了有更好的流量推荐,就需要避免重复,以免被系统判定为非原创。 这就需要对视频进行去重。 常见的手段就是翻转,剪裁,叠加素材等。 最近就遇到类似需求,思来想去,其实可以借助算法滤镜对视频的每一帧进行重新处理,这个要比使用其他视频画面1%透明度叠加效率高得多。 所以,就去研究了下Pixi.js中ColorMatrixFilter自带的算法滤镜,称为ColorMatrixFilter,就是通过矩阵变换改变画面色彩的滤镜,这个与模糊、马赛克这类滤镜还是有所不同的。 我看了下官方文档,有20多个自带的方法,品类倒是挺多,但是却没有对应的效果展示,纯文本,且描述也很简单。...

Object.is/===、数组at/直接索引、substring/slice的区别

8 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11387 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、Object.is和===的区别 Object.is()静态方法可以比较两个对象是否严格相等,在绝大多数情况下,和三等于号===的作用是一样的。 除了下面两种情况: 1. NaN的比较 如果使用等于好比较,则NaN和NaN的返回结果是false: NaN...

Nice! Safari也支持CSS @perporty规则了

22 days ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11377 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、姗姗来迟的支持 先看兼容性图表📈: 可以看到,@property规则Chrome在2020年的时候就支持了,而Safari浏览器姗姗来迟,2023年才支持,目前已经进入可以再生产环境使用的阶段(对兼容性要求不是那么严苛的项目)。 @property规则属于CSS Houdini中的一个特性,可以自定义CSS属性的类型,这个特性在现代CSS开发中还是很有用的,最具代表性的例子就是可以让CSS变量支持动画或过渡效果。 二、“变量种子计数器”的升级 在19年的时候,我曾提过使用“变量种子计数器”来颠覆现有的CSS动画实现方式。...

时隔两年,Chrome也支持round等CSS数学函数了

about 1 month ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11363 鑫空间-鑫生活 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、CSS又更强了一点 好消息,时隔两年,原本仅Safari浏览器支持的mod()/rem()/round()现在Chrome浏览器也支持啦。 mod()函数 CSS mod()函数返回第一个参数除以第二个参数的取模结果,类似于JavaScript余数运算符(%)。 使用示意:...

实用的JS对象分组静态方法Object.groupBy()

about 1 month ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11357 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、原生分组方法Object.groupBy() 好消息,所有现代浏览器都已经支持浏览器原生的静态方法Object.groupBy()了,如下图所示,Safari浏览器支持最晚,今年4月份才开始支持。 这就意味着最晚明年,就算不使用Polyfill代码,也能在生产环境使用该方法了。 作用 Object.groupBy()可以让可枚举对象,根据某个键进行自动分组。 例如: const...

好消息,align-content垂直居中也适用普通元素啦

about 2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=5474 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、普大喜奔好消息 好消息,实现元素垂直居中对齐终于有了专门的CSS属性,就是之前Flex布局和Grid布局中使用的align-content属性,现在已经可以在普通的block块级元素中使用啦! 案例演示 例如,有如下CSS和HTML代码: <ul> <li>《HTML并不简单》这本书不错</li> <li>感谢正版支持《CSS新世界》</li>...

来了来了,scrollend滚动停止事件也支持了

about 2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11347 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、这个特性期待已久了 之前处理滚动行为的时候,由于滚动事件的触发太频繁,所有,都会用setTimeout优化处理。 现在,浏览器支持了scrollend事件,就不需要那么麻烦了。 目前Firefox和Chrome浏览器已经原生支持,Safari的话还是需要老代码polyfill下(本文后面会有展示)。 效果体验 只要你不是Safari浏览器(手机不是iPhone),均可以滚动下面这个iframe内嵌容器,体验scrollend效果。 如果仅触摸,但是未发生滚动,scrollend事件是不会发生的。...

搞懂SVG中各种Light相关的光源滤镜

about 2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11330 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 SVG中有多个与光源相关的滤镜,看起来有些小复杂,今天就好好学一学,想办法都弄懂了,说不定哪一天就用到了。 一、fePointLight滤镜 顾名思义就是点光源滤镜效果。 和很多其他光源滤镜一样,要想生效,需要用在照明过滤器元件中。 所谓的照明过滤器,在SVG中,其实指的是<feDiffuseLighting> 和 <feSpecularLighting>这两个元素。...

不能落后,好好缕缕CSS滚动动画

2 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11318 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 生命不停,学习不止,CSS滚动动画出来已经有1年了。 Safari浏览器到现在还没有支持,如下图所示: 但是我已经等不及了,很多人都已经开始在生产环境使用这个新特性了,我也不能落后,学起来,不要管Safari了。 然后,滚动动画需要的CSS属性不仅是scroll-timeline、view-timeline,animation-timeline属性也是需要的,这也是CSS新特性,会在本文一同介绍。 好,开始吧。 一、温故而知新 其实滚动动画我很多年前也近似实现过,让我找找……...

页面级可视动画View Transitions API初体验

3 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11308 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、先从最简单的案例开始 本文介绍View Transitions API,可以实现类似Keynote里面神奇移动这样的动画效果,也即是浏览器自动识别场景1和场景2的不同,并让这个不同产生动画效果,特别适合复杂的页面级别的场景切换动画。 先从最简单的案例开始。 一、append图片淡出动画 传统方法实现页面插入一个图片并有动画效果,需要用到CSS3...

独家,MP3音频淡入淡出播放和转换的JS实现

3 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11293 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 一、需求背景 希望特效音可以有淡入淡出效果,同时能够在视频合成的时候体现在音轨中。 二、播放淡入淡出 先讲下偏浅层应用的技术实现,那就是播放淡入淡出。 1. 使用howlerjs实现 howlerjs这个项目(https://github.com/goldfire/howler.js)我多次提到过,凡是音频播放的需求(除了那种简单的点击播放),无需任何迟疑,也不用考虑其他,就是要howlerjs。...

关于《HTML并不简单》这本书

3 months ago

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11275 本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。 前言 盼星星,盼月亮,我的第5本书《HTML并不简单》已经正式上架了。 这本书是围绕HTML这门语言展开的,可以说是市面上唯一一本专讲HTML的书籍。 而HTML诞生至今已有30多年,为何鲜有专门介绍这门语言的书籍呢?一方面是商业原因,另一方面则是从业人员对HTML的积累不足以撑起一本书籍的体量。 作为一个学习门槛低,收益周期长的语言,很少有人会花大量的时间在这门语言的研究上。 但我是个例外,工作至今已有15年,一直在一线开发,一直没有停止对前端基础语言的研究与学习,使得自己的知识储备足够支撑起一本干货满满,细节丰富,深入浅出的HTML书籍。 可以说,如果不是阅读了本书,很多实用的前端知识你恐怕这辈子都不会知道。...