CSS图书馆 » HTML & CSS » 利用CSS固定背景交替实现视差滚动效果 利用CSS固定背景交替实现视差滚动效果...
2020-02-05 08:31
555 查看
视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂。没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技术,只需要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%; }
转载于:https://my.oschina.net/u/2371743/blog/799526
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 利用CSS固定背景交替实现视差滚动效果
- CSS图书馆 » HTML & CSS » 利用CSS固定背景交替实现视差滚动效果 利用CSS固定背景交替实现视差滚动效果
- 网页固定背景交替实现视差效果
- 利用CSS实现DIV在浏览器中位置相对固定,而且IE6下滚动不闪
- css固定背景图位置 实现屏幕滚动时 显示背景图不同区域
- css设置背景固定不滚动效果的示例
- css实现视差滚动效果
- 使用css实现页面头部固定,下面随着内容的增多滚动,但是头部不动的效果
- jquery实现的视差滚动教程(视差大背景效果)
- css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果
- HTML中 css实现滚动页面时固定页面其中一栏的效果
- CSS实现表头固定内容滚动效果
- jquery实现的视差滚动教程(视差大背景效果)
- [CSS] - 实现兼容性的渐变背景(gradient)效果
- 利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图。 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
- css实现背景渐变色效果
- vue监听滚动事件实现顶部元素header渐隐渐显效果,滚到一定距离固定在顶部
- 如何用CSS实现背景半透明效果
- cocos2dx 3.2下利用裁剪节点实现跑马灯滚动效果
- 利用纯css实现图片翻转的效果