CSS3滚动视差效果
滚动视觉差效果的 CSS3 玩法，真的是前端里一个既酷又实用的小技巧。它的原理其实也挺接地气的——近的动得快，远的慢点，立马就有了景深感。你只要掌握几个核心属性，比如 transform 和 will-change，基本就能搞出点花样来。再配合点 scroll-snap 或 @keyframes 动画，页面动起来有层次。
像页面背景啊、产品页、故事讲述段落这些场景，用视觉差效果就挺加分。你可以手撸，也可以偷个懒，试试 jQuery Parallax 或 WOW.js 这些类库，封装得还不错，直接用也挺方便。
不过哦，这玩意儿炫是炫，但别滥用。是手机端，性能稍差点的机子容易卡顿。建议你加上 will-change: transform 来给浏览器提个醒，优化渲染性能。
下面这几个例子我觉得都还不错，你可以点开看看实际效果：
如果你正在做一个需要视觉动效的项目，尤其是有长页面滚动的那种，不妨试试这种视觉差设计，说不定就点亮了你整个界面～
下载地址
用户评论
