codepen.io
叶沐
获得徽章 3
- 【京剧脸谱-猫神】#javascript #svg
Demo+源码：
codepen.io
本来无聊在dribbble上找灵感，突然看到这张很好看的图片，一看作者还是中国人，还留下了联系方式！于是我联系到作者本人，要到了源文件，把这张静态图做成了svg动画。
强烈推荐一下这位作者，叫王空空。像这样好看的脸谱图他一共画了一百幅！有兴趣的可以看一下他的作品：dribbble.com 展开评论38 - #视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在2014年，如今我们在很多网站上都可以看到它的身影。它的原理是通过前景与背景移动速度的差别，营造出一种奇妙的视觉体验。视差滚动一般分为两种：一种是前景和背景都动，但是前景比背景动得快（见图1）；还有一种是只有前景动，背景不动（见图2）。
第一种（图1）既可以通过js实现，也可以通过css 3d transform实现。js实现的兼容性比较好，css实现的性能比较好。
第二种（图2）主要通过background-attachment: fixed实现，比较简单。
图1的Demo+源码：codepen.io
图2的Demo+源码：codepen.io
扩展阅读：keithclark.co.ukpixelcog.github.io 展开评论49
