页面滚动视差效果的实现讲解

页面的视差滚动效果可以让你的网站逼格瞬间提升一个档次，怎么去实现呢？今天就介绍给大家用最简单的方式实现视差滚动效果。

首先我们来写个基本html结构

<section class="content">头部</section>
<section class="parallax"></section>
<section class="content">内容1</section>
<section class="parallax"></section>
<section class="content">内容2</section>
<section class="parallax"></section>
<section class="content">Footer</section>

上面的结构就是一栏内容然后下面放个视差效果块

内容部分我们正常写我们的dom结构即可

视差部分我们需要用到css的属性

background-attachment

该属性有三个值

scroll	/*默认值。背景图像会随着页面其余部分的滚动而移动。*/
fixed	/*当页面的其余部分滚动时，背景图像不会移动。*/
inherit /*规定应该从父元素继承 background-attachment 属性的设置。*/

我们可以看到这三个值，第一个是默认，第三个是继承，显然我们只能使用第二个

这里我分别给其添加该属性，并设置一张背景拉伸居中的图片（图片百度随便找的，如有版权请联系删除）

section.parallax{
	height: 50vh;
	background-image:url('http://d.hiphotos.baidu.com/image/pic/item/caef76094b36acaf6d1e855571d98d1000e99c98.jpg');
	background-attachment:fixed;
	background-size:cover;
	background-position:center center;
}
section.parallax:nth-child(4){
	background-image:url('http://d.hiphotos.baidu.com/image/pic/item/9825bc315c6034a84d0cf125c6134954082376a3.jpg');
}
section.parallax:nth-child(6){
	background-image:url('http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg');
}

我们再增加点初始css简单美化一下

body {
	padding:0;
	margin:0;
}
section {
	height:100vh;
	line-height: 100vh;
}
.content {
	background:#ccc;
	text-align:center;
	font-size:56px;
}

我这里没内容填充，高度用了vh单位，大家自行修改

其实我还想写点什么，忽然发现已经完成了，没错！视差就是这么简单，一句js都用不到。大家以后在制作网站的时候是不是可以考虑添加一些视差效果了呢^_^

本文由站长资源原创首发，转载请注明出处