timeTravel12585
前端攻城狮
获得徽章 0
- #视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在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 - Border-radius最多可以接收八个参数，我们可以借此来绘制不规则图形。
Demo+源码:codepen.io
一个很有用的可视化border-radius的工具：9elements.github.io 展开9102 - 分享个面向新手的免费计算机课程，主要向你讲解 Web 是如何工作的internetfundamentals.com
老师 Jen Kramer 拥有超过 8 年的教学经验，同时也是哈佛大学继续教育学院的讲师。评论23 - 这里推荐一网络安全的教程：www.hacksplaining.com
它和其它教程不同，它是以一个黑客的角度将你带入，它配套了十几个小demo，一步一步带你发现各种各样的安全漏洞。因为这些demo都是交互式，玩起来很带感。4222 - 12114
codepen.io