码迷,mamicode.com
首页 > Web开发 > 详细

网页固定背景交替实现视差效果

时间:2014-09-23 21:02:25      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   os   使用   java   ar   strong   

 

视差滚动效果近年来很受大家的欢迎,但实现这个功能一般都需要javaScript,而且实现做起来有一定的难度。就这个问题,我们跟大家分享另外一种比较简单的视差滚动效果技术,只需要CSS就可以实现了。一起来看看吧。

 

该滚动效果特点是使用固定背景与色块内容交替,当访客向下滚动时,背景是fixed固定的。可学习HTML高级教程了解。

bubuko.com,布布扣

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

 

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

使用教程

HTML代码

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

标题

内容...

标题

内容...

 


 

 

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%;
}

好了,就此介绍完这个固定背景滚动效果,喜欢的可以动手试一试,或许在你的下一个网页设计项目上尝试使用。想了解更多HTML/CSS教程可登陆e良师益友网。

网页固定背景交替实现视差效果

标签:style   http   color   io   os   使用   java   ar   strong   

原文地址:http://www.cnblogs.com/yuguotianqing/p/3989017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!