利用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 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
王王燕燕燕燕燕 -
2017 年 03 月 03 日 下午 4:49
能不能叙述的再详尽一些呢,小白做不出来…..
范小毅 -
2016 年 10 月 17 日 下午 4:53
色块部分怎么更换成图片呢?
沛恩 -
2016 年 05 月 08 日 下午 12:17
get
laoke -
2015 年 09 月 23 日 下午 3:36
哈哈哈
laoke -
2015 年 09 月 23 日 下午 3:36
哈哈哈
laoke -
2015 年 09 月 23 日 下午 3:36
哈哈哈哈
哈啰喂 -
2015 年 07 月 25 日 上午 10:15
毛兒_毛兒 -
2014 年 12 月 25 日 下午 8:42
請問 cd-scrolling-bg 這個加了背景色之後會有上下兩個留白無法套用到背景色,請問該怎麼解決呢
起个B名字真他妈难 -
2014 年 11 月 26 日 下午 2:14
zhenbang
web学习 -
2014 年 07 月 18 日 上午 12:12
这个效果不错。
Applehater果黑 -
2014 年 07 月 28 日 下午 9:34
好久都没更新了
Q.Chun-丘淳的独立博客 -
2014 年 07 月 17 日 下午 8:16
这种视差效果的背景是固定的,我见过一种是背景缓慢随滚动向上
Jason -
2014 年 07 月 16 日 下午 4:45
真適合我新手使用!
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站