动效案例：纯手工写一个滚动视差效果

大家好，今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师，不擅长PS、AE，但是我们完全可以通过前端技术设计一幅漂亮的画面，今天我们要设计一幅月下山间小道开车的画面。在介绍之前，我们首先了解下什么是滚动视差，有助于我们实现这个案例。

一、什么是滚动视差？

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

本内容来自百度百科

二、案例的效果展示

你可能迫不及待的想知道我们要做个什么样的效果，如下视频所示，我们滚动往下滑动浏览器的滚动条，月亮往左边移动，高山往上移动，文字往下移动，最终随着滚动条的滚动，淡出我们的视野，如下视频所示：

三、涉及到知识点

1、mix-blend-mode

你可能注意到了我们界面上的图片色调基本一致，其实原图片是有色彩的，那么问题来了，是如何实现这个效果呢，我们在所有的图片上层盖了一个背景色，这里用到 mix-blend-mode:color 的属性进行与图片的颜色进行混合。这是 CSS3 新增的属性，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式