1 | // ==UserScript== |
想给自己的网站写一个404、500之类的错误页，光放仨数字太丑，想着有什么办法漂亮地动起来，于是想起来以前做过一个破碎的粒子合并成文字的效果，就拿来使了。但是当初做的时候没有考虑性能上的问题，于是这次重构了一遍，所以本篇博客的重点不是动画效果，而是性能优化。
无意中看到miro的画布有一个无缝滚动+缩放的功能：https://miro.com/app/board/uXjVMR5OCp8=/?share_link_id=751850163166
看到“无缝滚动”这个关键词，当时一开始想着是不是用类似pixi.js里类似TilingSprite的实现方式，把网格图片平铺开来。但是miro画布缩放的时候依然能保持网格线清晰，于是使用renderTexture绘制网格，并在缩放过程中动态修改网格的尺寸，重新生成renderTexture给TilingSprite使用。
这篇文章转自掘金（https://juejin.cn/post/7138346293042085924），转载到这里一方面是因为掘金的排版不习惯，一方面当做收藏方便我随时回忆
你们见过 Spotify 的年终活动吗？他们通过图像颜色处理创造了引人注目的视觉美感。
善用图形处理可以增加我们网页的逼格——过滤器filter就能通过动态串联的方式帮我们在浏览器做到这一点。
今年早些时候，我推出了CSSgram，这是一个纯 CSS 库，它使用过滤器和混合模式来创建图片过滤器。
现在，这可以通过修补和混合模式来完成——但CSS过滤器有一个巨大的缺点：它无法控制RGBA通道。但是SVG的feColorMatrix弥补了这个不足。
Steam重度用户都应该知道Wallpaper Engine这个神器，我们可以把自己的网页发布到创意工坊，供全球网友们作为壁纸下载，是不是成就感瞬间up。那就来看看如何做到吧~
之前有一篇博客试过使用 JavaScript生成字符画，但是最终没有实现gif转字画符，事实上用当时说的方法：把gif每帧抽取出来，然后绘制到canvas上即可。
不过这次要说的实现方式并非js，而是纯css实现，核心的属性是background-clip 和text-fill-color ，由于这俩属性目前并没有被纳入标准，所以需要加上 -webkit-前缀。当初发现这个属性是真的像发现了个宝藏，通过它们的组合可以实现非常多有意思的效果。前者用于对背景裁剪，后者用于和背景颜色叠加。
于是就有了下图的效果（背景是一张动图，然后使用文字对背景进行裁剪。字体透明填充，与背景叠加）
原理：
① 定义一个数组，数组里面包含每张图片的引用以及它们进入、进入完成、离开、完成离开时的百分比
② 监听页面滚动，算出当前的滚动进度
③ 遍历数组，根据当前进度修改图片的状态，修改图片的–progress属性值