文档章节

CSS图书馆 » HTML & CSS » 利用CSS固定背景交替实现视差滚动效果 利用CSS固定背景交替实现视差滚动效果

zhicai_07
 zhicai_07
发布于 2016/12/03 22:58
字数 415
阅读 2
收藏 0

视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂。没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技术,只需要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%;
}

© 著作权归作者所有

共有 人打赏支持
zhicai_07
粉丝 0
博文 22
码字总数 6366
作品 0
浦东
程序员
私信 提问
8 个让人印象深刻的网站 JS 视觉效果

网页设计已经提升到一个整体新的水平,Flash 渐渐失去了地位,逐渐被 HTML/JavaScript/CSS 所超越,而且一样可以实现出 Flash 复杂的特效。 本文介绍 8 个让人印象深刻的网站视觉效果,这些效...

oschina
2012/07/31
7.9K
6
渴切发布视差滚动解决方案"镨" pa.js

渴切开源发布视差滚动解决方案"镨" pa.js。代码简约,快速上手。pa.js 取自视差滚动(parallax scrolling)视差英文单词的前两个字母。是一款简约视差滚动js解决方案,采用了灵活的html属性来...

tyshymy
2013/10/07
3.6K
20
67 个节省开发者时间的实用工具、库与资源

67 个节省开发者时间的实用工具、库与资源 在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想...

IT程序狮
2017/09/18
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
前端——Stellar.js 制作视差滚动

近些年讨论得很热烈的设计趋势是视觉差滚动效果。不管你喜不喜欢,很多网站都在用它。在本教程中,我会介绍视觉差滚动和用jQuery插件Stellar.js来制作视觉差滚动效果。 视差滚动(Parallax ...

fycool
2016/11/08
61
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
1
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
0
0
Mybatis 学习笔记四 MyBatis-Plus插件

Mybatis 学习笔记四 MyBatis-Plus插件 maven依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus</artifactId> <ve......

晨猫
昨天
4
0
小白带你认识netty(二)之netty服务端启动(下)

承接上一篇小白带你认识netty(二)之netty服务端启动(上),还剩下两步骤:3、注册Selector:将Channel注册到Selector上 和 4、端口的绑定:服务端端口的监听。 3、注册Selector:将Chann...

天空小小
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部