视差滚动效果近年来很受大家的欢迎,但实现这个功能一般都需要javaScript,而且实现做起来有一定的难度。就这个问题,我们跟大家分享另外一种比较简单的视差滚动效果技术,只需要CSS就可以实现了。一起来看看吧。
演示
该滚动效果特点是使用固定背景与色块内容交替,当访客向下滚动时,背景是fixed固定的,具体请查看:在线演示
从上图可以看出,内容向上滚动时,第一张背景是固定的,不会跟着向上滚动。即:固定背景 + 色块内容 + 固定背景 + 色块内容…这样的交替方式,从而产生视差效果。
兼容性
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固定背景交替实现视差滚动效果
标题网址:/news5/318805.html
成都网站建设公司_创新互联,为您提供品牌网站制作、服务器托管、用户体验、网站制作、响应式网站、网站建设
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联