css实现视差滚动效果
时间:2022-05-04
本文章向大家介绍css实现视差滚动效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html
大多数的视差滚动效果都是使用js来实现的,实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS代码就可以实现视差滚动效果了。
css有一个background-attachment属性
作用是设置背景图像是否固定或者随着页面的其余部分滚动。
这里要注意任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
上代码
结构超级简单,用到的文字是00后小诗人姜二嫚的,哈哈,真的很不错
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css视差滚动</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="box">
<div class="flowImage fixed-bg bg1">
<p>
这个西红柿死了吗<br>
可是它的颜色<br>
还像鲜花一样奔放
</p>
</div>
<div class="flowImage fixed-bg bg2">
<p>为了跳到天上<br>
月亮先爬到树上。
</p>
</div>
<div class="flowImage fixed-bg bg3">
<p>
晚上<br>
我打着手电筒散步<br>
累了就拿它当拐杖<br>
我拄着一束光
</p>
</div>
<div class="flowImage fixed-bg bg4">
<p>
我是在摸一颗星星<br>
因为地球<br>
也是一颗星星
</p>
</div>
<div class="flowImage fixed-bg bg5">
<p>
我在家等爸爸妈妈<br>
我饿了<br>
这时飞来一只金龟子<br>
可能金龟子也饿了
</p>
</div>
<div class="flowImage fixed-bg bg6">
<p>
每当见到加油站<br>
我就在心里大声地喊<br>
加油加油加油<br>
也不知为了谁
</p>
</div>
</div>
</body>
</html>
css
body, html {
height: 100%;
margin: 0;
padding: 0
}
.box {
height: 100%;
position: relative;
z-index: 1;
}
.flowImage {
position: relative;
height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
background-attachment: fixed; //划重点!!!
}
.flowImage>p {
margin: 0;
position: absolute;
top: 50%;
left: 10%;
color: #fff;
font-size: 30px;
transform: translate(-10%, -50%);
}
.bg1 {
background-image: url(images/1.jpg);
}
.bg2:nth-child(2) {
background-image: url(images/2.jpg);
}
.bg3:nth-child(3) {
background-image: url(images/3.jpg);
}
.bg4:nth-child(4) {
background-image: url(images/4.jpg);
}
.bg5:nth-child(5) {
background-image: url(images/5.jpg);
}
.bg6:nth-child(6) {
background-image: url(images/6.jpg);
}
搞定收工
- dedecms无法登录提示本页面禁止返回
- 前台开发从头说起:理解css盒模型
- 两个js冲突怎么解决?试试这四个方法
- dedecms如何去除后台登陆验证码
- DEDECMS自定义表单unix时间戳转换成常规时间方法及增加表单添加时间方法
- dedecms自定义表单发布成功后返回当前页面
- 前端构建工具 Gulp.js 上手实例
- dedecms数据库内容替换安全确认码不显示怎么解决
- 利用宏避免发送确认邮件时忘记添加附件
- dateDiff在Objective-C中的实现
- 禁用Firefox自带的元素查看工具
- 容易被误解的overflow:hidden
- dedecms调用全站相关文章怎么设置
- dedecms自定义表单提交成功后提示信息修改和跳转链接修改
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 将博客主题替换成 Clean Blog
- Go 数据存储篇(一):基于内存存储实现数据增删改查功能
- 创建联系表单页面并通过 Ajax 提交表单请求数据
- Go 数据存储篇(二):通过 JSON 格式存取文本数据
- Go 数据存储篇(三):通过 CSV 格式读写文本数据
- Laravel 8 正式发布,一起来看看有哪些新特性吧
- Azkaban 2.5 Documentation
- 噪声纹理之消融效果! shader 入门精要! Cocos Creator Shader !
- Docker安装官方Nexus3镜像构建Docker私服 实践笔记
- js事件大全
- Centos7 安装 jdk8 的正确姿势 实践笔记
- 初探雾效果!shader 源码分析与讲解! Cocos Creator 3D Shader Fog !
- js键盘键值大全
- mysql用户创建+密码修改+删除用户+角色分配 的正确姿势 实践笔记
- Centos7 安装 Nginx 的正确姿势 并设置开机自启 实践笔记