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;看看它们如何让我们的创作欲望得到…

说真的,项目经理不太需要PMP

事实上&#xff0c;很多成功的项目经理并没有PMP证书&#xff0c;但他们凭借丰富的项目经验和对项目管理的深入理解&#xff0c;成功完成了许多复杂的项目。 PMP是一个全球公认的项目管理专业认证&#xff0c;它代表了项目经理在项目管理理论和方法上的专业知识和技能。所以会…

如何在 Linux 和 Mac 终端命令中添加别名

在本文中&#xff0c;我们将探讨一种简单的技巧&#xff0c;可以节省您在终端中输入重复命令的时间。 作为开发者&#xff0c;我们花费大量时间在终端上执行命令。无论是浏览目录、运行脚本、更改 Node.js 版本还是版本控制命令&#xff0c;手动输入每个命令都是一项耗时的任务…

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

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

Windows上构建 Chisel-Bootcamp

windows环境构建本地Chisel-Bootcamp 安装摘要Chisel-boocamp环境搭建安装java安装Anaconda安装scala 下载Chisel-bootcamp 环境Reference 安装摘要 在windows上安装chisel-boocamp&#xff0c;与linux过程类似。 安装java8安装anaconda安装scala下载Chisel-bootcamp环境 Ch…

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…

什么是MaaS?如何理解模型即服务

MaaS&#xff08;Model as a Service&#xff09;&#xff1a;即“模型即服务”。这是一种将机器学习模型部署到企业端&#xff0c;以API、SaaS或开源软件的形式提供给用户使用&#xff0c;从而使用户能够通过调用模型来获得所需的服务的方式。通过这种方式&#xff0c;开发人员…

在西非土地上播种希望

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

U-boot启动过程概述

U-Boot(Universal Boot Loader)&#xff0c;即通用Bootloader&#xff0c;是德国DENX小组开发的用于多种嵌入式CPU的bootloader程序。是遵循GPL条款的开放源代码项目。 Bootloader不属于操作系统内核&#xff0c;这一部分代码不具有可移植性&#xff0c;在移植操作系统时…

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

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

gateway基本配置详解与深入分析

Spring Cloud Gateway 是基于 SpringBoot 和 Project Reactor 构建的 API 网关&#xff0c;用于提供路由、过滤和监控等功能。以下是V哥在 SpringBoot 3 项目中集成和配置 Spring Cloud Gateway 的基本步骤和深入分析&#xff0c;提供给你参考&#xff1a; 1、添加依赖 在你的…

【Qwen模型】QWEN TECHNICAL REPORT

【Qwen模型】QWEN TECHNICAL REPORT 论文信息 阅读评价 Abstract Introduction PreTraining ALIGNMENT&#xff08;对齐&#xff09; CODE-QWEN: SPECIALIZED MODEL FOR CODING MATH-QWEN: SPECIALIZED MODEL FOR MATHEMATICS REASONING RELATED WORK CONCLUSION 论文…