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


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

NewImage

演示

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

 NewImage

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

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

使用教程

HTML代码

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

<main>
 <div class="cd-fixed-bg cd-bg-1">
 <h1>标题</h1>
 </div> 
 
 <div class="cd-scrolling-bg cd-color-1">
 <div class="cd-container">
 <p>
 内容...
 </p>
 </div>
 </div>
 
 <div class="cd-fixed-bg cd-bg-2">
 <h1>标题</h1>
 </div> 
 
 <div class="cd-scrolling-bg cd-color-2">
 <div class="cd-container">
 <p>
 内容...
 </p>
 </div>
 </div>
</main>

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

 

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


注:本文转载自利用CSS固定背景交替实现视差滚动效果的教程,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

上一篇 下一篇