一、是什么
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验
我们可以把网页解刨成:背景层、内容层、悬浮层
悬浮层,内容曾,背景层
当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果
二、实现方式
使用css形式实现视觉差滚动效果的方式有:
background-attachment
transform:translate3D
background-attachment
作用是设置背景图像是否固定或者随着页面的其余部分滚动
值分别有如下:
scroll:默认值,背景图像会随着页面其余部分的滚动而移动
fixed:当页面的其余部分滚动时,背景图像不会移动
inherit:继承父元素background-attachment属性的值
完成滚动视觉差就需要将background-attachment属性设置为fixed,让背景相对于视口固定。及时一个元素有滚动机制,背景也不会随着元素的内容而滚动
也就是说,背景一