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

2024-02-25    分类: 网站建设

视差滚动效果近年来很受大家的欢迎,但实现这个功能一般都需要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。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站建设