文档章节

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

zhicai_07
 zhicai_07
发布于 2016/12/03 22:58
字数 415
阅读 2
收藏 0
点赞 0
评论 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
67 个节省开发者时间的实用工具、库与资源

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

IT程序狮
2017/09/18
0
0
渴切发布视差滚动解决方案"镨" pa.js

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

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

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

张孝国
06/26
0
0
Android5.0+(CollapsingToolbarLayout)

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layoutscrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar...

让代码飞一会
2015/07/28
0
0
前端——Stellar.js 制作视差滚动

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

fycool
2016/11/08
61
0
67 个拯救前端开发者的工具、库和资源

https://sdk.cn/news/7837?utmsource=tuicool&utmmedium=referral 在本文中,我不会去谈 React、Angular、Vue 等等这些大的前端框架,也不会谈 Atom、VS code、Sublime 等等这些已经很出名的...

u011001084
2017/12/13
0
0
67 个拯救前端开发者的工具、库和资源

在本文中,我们不去谈 React、Angular、Vue 等等这些大的前端框架,也不谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器,只是想简单的分享一套有助于提升开发者工作流的工具集。...

Janet_zyh
2017/12/12
0
0
jQuery 滚动插件--Parallax-Scroll

Parallax-Scroll 是 jQuery 插件,用来创建背景图片元素,利用 background-attachment 的固定和滚动,制作类似 Spotify 上面的视差滚动效果。 在线演示...

叶秀兰
2014/12/23
1K
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部