用css实现滚动效果(CSS完成视差滚动效果)
类别:Web前端 浏览量:1655
时间:2021-11-03 15:49:44 用css实现滚动效果
CSS完成视差滚动效果 一、是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验
我们可以把网页解刨成:背景层、内容层、悬浮层
当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果
二、实现方式使用css形式实现视觉差滚动效果的方式有:
- background-attachment
- transform:translate3D
background-attachment
作用是设置背景图像是否固定或者随着页面的其余部分滚动
值分别有如下:
- scroll:默认值,背景图像会随着页面其余部分的滚动而移动
- fixed:当页面的其余部分滚动时,背景图像不会移动
- inherit:继承父元素background-attachment属性的值
完成滚动视觉差就需要将background-attachment属性设置为fixed,让背景相对于视口固定。及时一个元素有滚动机制,背景也不会随着元素的内容而滚动
也就是说,背景一开始就已经被固定在初始的位置
核心的css代码如下:
section { height: 100vh; } .g-img { background-image: url(...); background-attachment: fixed; background-size: cover; background-position: center center; }
整体例子如下:
<style> li { height: 100vh; background: rgba(0, 0, 0, .7); color: #fff; line-height: 100vh; text-align: center; font-size: 20vh; } .a-img1 { background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpg" alt="用css实现滚动效果(CSS完成视差滚动效果)" border="0" />
transform:translate3D
同样,让我们先来看一下两个概念transform和perspective:
- transform: css3 属性,可以对元素进行变换(2d/3d),包括平移 translate,旋转 rotate,缩放 scale,等等
- perspective: css3 属性,当元素涉及 3d 变换时,perspective 可以定义我们眼睛看到的 3d 立体效果,即空间感
3D视角示意图如下所示:
举个例子:
<style> html { overflow: hidden; height: 100% } body { /* 视差元素的父级需要3D视角 */ perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; } #app{ width: 100vw; height:200vh; background:skyblue; padding-top:100px; } .one{ width:500px; height:200px; background:#409eff; transform: translateZ(0px); margin-bottom: 50px; } .two{ width:500px; height:200px; background:#67c23a; transform: translateZ(-1px); margin-bottom: 150px; } .three{ width:500px; height:200px; background:#e6a23c; transform: translateZ(-2px); margin-bottom: 150px; } </style> <li id="app"> <li class="one">one</li> <li class="two">two</li> <li class="three">three</li> </li>
而这种方式实现视觉差动的原理如下:
- 容器设置上 transform-style: preserve-3d 和 perspective: xpx,那么处于这个容器的子元素就将位于3D空间中,
- 子元素设置不同的 transform: translateZ(),这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样
- 滚动滚动条,由于子元素设置了不同的 transform: translateZ(),那么他们滚动的上下距离 translateY 相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果
以上就是CSS完成视差滚动效果的详细内容,更多关于CSS 视差滚动效果的资料请关注开心学习网其它相关文章!
您可能感兴趣
- class对应的css(CSS的class与id常用的命名规则)
- css如何使用z-index(CSS中的z-index属性基本使用教程)
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- css 自适应手机屏幕(Css实现手机端页面强制横屏的方法示例)
- css布局图解(浅谈CSS三栏布局的N种实现)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)
- css3怎么改成3d(灵活运用CSS3特性绘制简易版围棋效果)
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- 三种css选择符(浅谈css之属性及剩余的选择符)
- css如何让浮动元素水平居中
- CSS百分比定义高度的问题
- web前端css总结(前端面试必备之CSS3的新特性)
- css sprites介绍
- css如何去掉本身的浮动元素(CSS清除浮动的常用方法优缺点分析)
- css选择器知识汇总(在Less中写IE的css hack的方法介绍)
- 韩国泡菜做法(韩国泡菜的做法步骤)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
热门推荐
- docker快速配置redis集群(基于docker搭建redis集群的方法)
- python 正则表达式语法大全(python re库的正则表达式入门学习教程)
- dedecms如何写接口(dede的sql语句调用方法使用示例)
- dedecms栏目内容怎么插入分页符(dedecms织梦让likearticle的mytypeid支持多个栏目和子栏目)
- 如何用tomcat部署web项目(一文搞懂如何部署启动多个tomcat并移植项目)
- python参模块使用教程(Python参数解析模块sys、getopt、argparse使用与对比分析)
- pythonmatplotlib怎么画区域(python matplotlib实现双Y轴的实例)
- URL如何编码与解码
- javascript如何转换int型(浅谈JavaScript中的parseInt的妙用)
- 前端技术图解(前端水印的简单实现代码示例)