页面的视差滚动效果可以让你的网站逼格瞬间提升一个档次,怎么去实现呢?今天就介绍给大家用最简单的方式实现视差滚动效果。
首先我们来写个基本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都用不到。大家以后在制作网站的时候是不是可以考虑添加一些视差效果了呢^_^
本文由站长资源原创首发,转载请注明出处
评论前必须登录!
注册