利用CSS固定背景交替实现视差滚动效果

Sponsor

视差滚动效果的网页设计案例我们分享过很多，实现这个功能一般都需要JS，而且比较复杂。没关系，今天设计达人网小编向大家介绍另外一种简单的视差效果技术，只需要CSS就能实现。

演示

该滚动效果特点是使用固定背景与色块内容交替，当访客向下滚动时，背景是fixed固定的，具体请查看：在线演示

从上图可以看出，内容向上滚动时，第一张背景是固定的，不会跟着向上滚动。即：固定背景 + 色块内容 +固定背景 + 色块内容…这样的交替方式，从而产生视差效果。

兼容性

IE9+

Firefox

Chrome

Safari

Opera

使用教程

HTML代码

HTML代码结构很清晰，使用main标签包住所有内容，其中.cd-fixed-bg样式就是固定背景，.cd-scroll-bg样式为色块内容。

标题

内容...

标题

内容...

CSS样式

主要是通过css的background-attachment:fixed定位属性来让背景固定，具体请看下面的样式代码：

body, html, main {

/* important */

height: 100%;

}

.cd-fixed-bg {

min-height: 100%;

background-size: cover;

background-attachment: fixed;

background-repeat: no-repeat;

background-position: center center;

}

.cd-fixed-bg.cd-bg-1 {

background-image: url("../img/cd-background-1.jpg");

}

.cd-fixed-bg.cd-bg-2 {

background-image: url("../img/cd-background-2.jpg");

}

.cd-fixed-bg.cd-bg-3 {

background-image: url("../img/cd-background-3.jpg");

}

.cd-fixed-bg.cd-bg-4 {

background-image: url("../img/cd-background-4.jpg");

}

.cd-scrolling-bg {

min-height: 100%;

}

好了，就此介绍完这个固定背景滚动效果，喜欢的可以动手试一试，或许在你的下一个网页设计项目上尝试使用。

推荐：查看最受欢迎的 301 个设计网站 →

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

王王燕燕燕燕燕 -

年 03 月 03 日 下午 4:49

能不能叙述的再详尽一些呢，小白做不出来…..

范小毅 -

年 10 月 17 日 下午 4:53

色块部分怎么更换成图片呢？

沛恩 -

年 05 月 08 日 下午 12:17

get

laoke -

年 09 月 23 日 下午 3:36

哈哈哈

laoke -

年 09 月 23 日 下午 3:36

哈哈哈

laoke -

年 09 月 23 日 下午 3:36

哈哈哈哈

哈啰喂 -

年 07 月 25 日 上午 10:15

毛兒_毛兒 -

年 12 月 25 日 下午 8:42

請問 cd-scrolling-bg 這個加了背景色之後會有上下兩個留白無法套用到背景色，請問該怎麼解決呢

起个B名字真他妈难 -

年 11 月 26 日 下午 2:14

zhenbang

web学习 -

年 07 月 18 日 上午 12:12

这个效果不错。

Applehater果黑 -

年 07 月 28 日 下午 9:34

好久都没更新了

Q.Chun-丘淳的独立博客 -

年 07 月 17 日 下午 8:16

这种视差效果的背景是固定的，我见过一种是背景缓慢随滚动向上

Jason -

年 07 月 16 日 下午 4:45

真適合我新手使用!

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站