这篇博客的灵感源头是B站的这个魔性视频：「 高田熊 」 跟 着 节 奏，一 起 摇 摆 ~ | takadabear，突然想写个高田熊打PP的音乐可视化页面
这个页面使用的软件、框架、技术主要有：录屏工具、Photoshop、TexturePacker、PixiJS、Web Audio API
这篇博客的灵感源头是B站的这个魔性视频：「 高田熊 」 跟 着 节 奏，一 起 摇 摆 ~ | takadabear，突然想写个高田熊打PP的音乐可视化页面
这个页面使用的软件、框架、技术主要有：录屏工具、Photoshop、TexturePacker、PixiJS、Web Audio API
之前有一篇博客试过使用 JavaScript生成字符画，但是最终没有实现gif转字画符，事实上用当时说的方法：把gif每帧抽取出来，然后绘制到canvas上即可。
不过这次要说的实现方式并非js，而是纯css实现，核心的属性是background-clip 和text-fill-color ，由于这俩属性目前并没有被纳入标准，所以需要加上 -webkit-前缀。当初发现这个属性是真的像发现了个宝藏，通过它们的组合可以实现非常多有意思的效果。前者用于对背景裁剪，后者用于和背景颜色叠加。
于是就有了下图的效果（背景是一张动图，然后使用文字对背景进行裁剪。字体透明填充，与背景叠加）
原理：
① 定义一个数组，数组里面包含每张图片的引用以及它们进入、进入完成、离开、完成离开时的百分比
② 监听页面滚动，算出当前的滚动进度
③ 遍历数组，根据当前进度修改图片的状态，修改图片的–progress属性值
hello，民娜桑~~我又来开新坑了(￣ε(#￣)☆╰╮o(￣皿￣///)，这次尽量保证把这个坑填完~
本系列我会分四篇来完成主题，分别是① DIV+CSS的实现，② canvas2D的简单实现，③ canvas2D的进阶实现，④ webgl+着色器的实现 以及 ⑤ 包装成jquery插件并发布为npm模块 。