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>
div {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.jpeg);background-attachment: fixed;background-size: cover;background-position: center center;}.a-img2 {background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);background-attachment: fixed;background-size: cover;background-position: center center;}.a-img3 {background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);background-attachment: fixed;background-size: cover;background-position: center center;}
</style><div class="a-text">1</div><div class="a-img1">2</div><div class="a-text">3</div><div class="a-img2">4</div><div class="a-text">5</div><div class="a-img3">6</div><div class="a-text">7</div>

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{position: relative;width: 100vw;height:200vh;background:skyblue;padding-top:100px;transform-style: preserve-3d;}.one{position: absolute;top: 500px;left: 0;width: 100px;height: 100px;background: #409eff;transform: translateZ(0px);}.two{position: absolute;top: 500px;left: 200px;width: 100px;height: 100px;background: #67c23a;transform: translateZ(0.1px);}.three{position: absolute;top: 500px;left: 400px;width: 100px;height: 100px;background: #e6a23c;transform: translateZ(0.2px);}
</style>
<div id="app"><div class="one">one</div><div class="two">two</div><div class="three">three</div>
</div>

这种方式实现视觉差动的原理如下:

● 容器设置上 transform-style: preserve-3d 和 perspective: xpx,那么处于这个容器的子元素就将位于3D空间中,

● 子元素设置不同的 transform: translateZ(),这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样

● 滚动滚动条,由于子元素设置了不同的 transform: translateZ(),那么他们滚动的上下距离 translateY 相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

启明云端ESP32-S3+车载桥接器案例,能实现对车载产品集控

最近房车旅行很盛行&#xff0c;谁不想五一自驾游开车去外面玩&#xff1f;为了能提升用户体验&#xff0c;车企房车智能化升级越来越普遍&#xff0c;接下来小启给大家讲一个案例&#xff0c;启明云端ESP32-S3车载桥接器&#xff0c;感兴趣的可以看看。 一、ESP32-S3车载桥接器…

分享4款免费ai绘画工具!

随着人工智能技术的飞速发展&#xff0c;AI绘画工具已经逐渐走入了我们的日常生活。这些工具不仅能够简化绘画过程&#xff0c;更能让普通人体验到艺术创作的乐趣。今天&#xff0c;我们就来盘点一下那些值得一试的免费AI绘画工具&#xff0c;看看它们如何让我们的创作欲望得到…

有效的括号 + 点击消除 || 匹配问题

目录 点击消除&#xff1a; 有效的括号&#xff1a; 点击消除&#xff1a; 点击消除_牛客题霸_牛客网 (nowcoder.com)https://www.nowcoder.com/practice/8d3643ec29654cf8908b5cf3a0479fd5?tpId308&tqId40462&ru/exam/oj 如题目所述&#xff0c; 示例1&#xf…

14-Error Handling (错误处理)

ESP32-S3错误处理&#xff1a;理解并掌握其重要性 在编程中&#xff0c;错误处理是一种重要的编程实践&#xff0c;它可以帮助我们的程序在遇到错误时能够优雅地恢复&#xff0c;而不是崩溃或产生不可预测的结果。在IDF中官方提供一些实用的错误处理技巧。&#x1f469;‍&…

微信小程序酒店选择日期和入住人数(有效果图)

效果图 app.vue onLaunch:function(options){this.defaultcache()}defaultcache(){// 入住信息缓存var arr this.getDateTime();var ReserVation {reservType:0,//1 人数 2日期InCheckin:{},//入离日期peopleArr:[{title:成人,num:2},{title:儿童,num:0},{title:宝子,num:1…

第二部分 Python提高—GUI图形用户界面编程(六)

其他组件学习 文章目录 OptionMenu 选择项Scale 移动滑块颜色选择框文件对话框简单输入对话框通用消息框ttk 子模块控件 OptionMenu 选择项 OptionMenu(选择项)用来做多选一&#xff0c;选中的项在顶部显示。显示效果如下&#xff1a; from tkinter import * root Tk();ro…

【机器学习】分类与预测算法评价的方式介绍

一、引言 1、机器学习分类与预测算法的重要性 在数据驱动的时代&#xff0c;机器学习已经成为了处理和分析大规模数据的关键工具。分类与预测作为机器学习的两大核心任务&#xff0c;广泛应用于各个领域&#xff0c;如金融、医疗、电商等。分类算法能够对数据进行有效归类&…

【分治】Leetcode 库存管理 III

题目讲解 LCR 159. 库存管理 III 本题的含义就是让求出最小的k个数 算法讲解 class Solution { public:void my_qsort(vector<int>& nums, int l, int r){if(l > r) return ;int i l, left l-1, right r1;int key nums[rand() % (r - l 1) l];//完成分三…

uni-app项目引入阿里巴巴矢量图标库

uni-app项目引入阿里巴巴矢量图标库 1.下载图标库中的symbol下载至本地 2.解压文件夹并放入项目中 我这里放入的位置是src/static/icon目录下 3.修改文件指向路径为相对路径 即在路径iconfont前面添加斜杠 4.app.vue的style中引入 import static/icon/iconfont.css; 5…

(2022级)成都工业学院数据库原理及应用实验四: SQL简单查询

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、成品仅提供参考 3、如果成品不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 Navicat Premium 16 Mysql 8.0.36 实验要求 在实验三的基础上完成下列查询&#xff1a; 1、查询所有…

ComfyUI IPAdapter plus安装教程

ComfyUI是一个创新的Stable Diffusion AI绘图工具WebUI&#xff0c;它采用节点流程式设计&#xff0c;将Stable Diffusion的操作流程细分为多个节点&#xff0c;从而实现了更高精度的工作流定制与优秀的可复现性。相较于传统WebUI&#xff0c;ComfyUI不仅操作更为流畅&#xff…

在西非土地上播种希望

在西非这片广阔而充满活力的土地上播种希望&#xff0c;我们可以从多个维度进行解读和行动&#xff1a; 教育援助&#xff1a;投资于当地的教育事业&#xff0c;改善学校设施&#xff0c;提供教育资源&#xff0c;尤其是对女童教育的重视&#xff0c;让更多孩子有机会接受基础…

成都欣丰洪泰文化传媒有限公司打造电商服务新标杆

随着互联网的快速发展&#xff0c;电子商务行业蓬勃兴起&#xff0c;成为推动经济发展的重要力量。在这个大背景下&#xff0c;成都欣丰洪泰文化传媒有限公司凭借其专业的电商服务&#xff0c;在激烈的市场竞争中脱颖而出&#xff0c;成为行业的佼佼者。 一、公司背景与实力 成…

v1.9.2-httpsok快速申请免费SSL证书

v1.9.2-&#x1f525;httpsok快速申请免费SSL证书 介绍 httpsok 是一个便捷的 HTTPS 证书自动续签工具&#xff0c;专为 Nginx 、OpenResty 服务器设计。已服务众多中小企业&#xff0c;稳定、安全、可靠。 一行命令&#xff0c;一分钟轻松搞定SSL证书自动续期 更新日志 V1…

endnote21从安装到使用!文献引用!Mac版

视频学习和资源获取 新建库 选择上方导航栏处的File下的New 软件 软件界面可以分成四个部分 2是个人图书馆 3是对某一分类中文献的展示 最右侧是对具体一篇文献的摘要、编辑以及PDF 有回形针标志意味着这篇有全文&#xff0c;也就是有pdf 如果没有回形针代表它只有引文信…

HCIP的学习(10)

OSPF不规则区域划分 区域划分 非骨干与骨干区域直接相连骨干区域唯一 限制规则&#xff1a; 非骨干区域之间不允许直接相互发布区域间路由信息OSPF区域水平分割&#xff1a;从非骨干区域收到的路由信息&#xff0c;ABR设备能接收到不能使用&#xff08;从某区域传出的路由&…

敢不敢挑战?看完这篇 Python 学习攻略不成大牛就请我退出 IT !

目录 0基础小白怎么学Python&#xff1f; Python基本概念最全图 1.Python 解释器&#xff1a; 2.Python数据结构&#xff1a; 3.变量与运算符&#xff1a; 4.Python 流程控制&#xff1a; 5.Python 文件处理&#xff1a; 6.Python 输入输出&#xff1a; 7.Python 异常…

注意力机制基本思想(一)

​&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客&#x1f525; 系列专栏&#xff1a; &#x1f3c0;《深度学习基础知识》 相关专栏&#xff1a; ⚽《机器学习基础知识》 &#x1f3d0;《机器学习项目实战》 &#x1f94e;《深度学习项目实战…

2024年华中杯B题论文发布+数据预处理问题一代码免费分享

【腾讯文档】2024年华中杯B题资料汇总 https://docs.qq.com/doc/DSExMdnNsamxCVUJt 行车轨迹估计交通信号灯周期问题 摘要 在城市化迅速发展的今天&#xff0c;交通管理和优化已成为关键的城市运营问题之一。本文将基于题目给出的数据&#xff0c;对行车轨迹估计交通信号灯…

七月论文审稿GPT第4.5版:通过15K条paper-review数据微调Llama2 70B(含各种坑)

前言 当我们3月下旬微调完Mixtral 8x7B之后(更多详见&#xff1a;七月论文大模型&#xff1a;含论文的审稿、阅读、写作、修订 )&#xff0c;下一个想微调的就是llama2 70B 因为之前积攒了不少微调代码和微调经验&#xff0c;所以3月底apple便通过5K的paper-review数据集成功…