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

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

发表于: HTML & CSS, 优秀设计资源. 评论 (13)
Sponsor

视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要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%;
}

 

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

下载源码 | 在线演示

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论13 Responses to “利用CSS固定背景交替实现视差滚动效果”

  1. 王王燕燕燕燕燕 - 回复

    能不能叙述的再详尽一些呢,小白做不出来…..

  2. 范小毅 - 回复

    色块部分怎么更换成图片呢?

  3. 沛恩 - 回复

    get

  4. laoke - 回复

    哈哈哈

    • laoke -

      哈哈哈

    • laoke -

      哈哈哈哈

  5. 哈啰喂 - 回复
  6. 毛兒_毛兒 - 回复

    請問 cd-scrolling-bg 這個加了背景色之後會有上下兩個留白無法套用到背景色,請問該怎麼解決呢

  7. 起个B名字真他妈难 - 回复

    zhenbang

  8. web学习 - 回复

    这个效果不错。

    • Applehater果黑 -

      好久都没更新了

  9. Q.Chun-丘淳的独立博客 - 回复

    这种视差效果的背景是固定的,我见过一种是背景缓慢随滚动向上

  10. Jason - 回复

    真適合我新手使用!


{ 发表评论 }