记录--滚动视差动画和解决方法

news2024/11/16 4:40:26

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

最简单的代码，最极致的享受，主打的就是一个炫酷～

滚动视差

滚动视差效果(Parallax Scrolling)是指让多层背景以不同的速度位移，形成立体的运动效果的视觉体验，在前端强交互的时代，更应该多考虑这种用户体验较好的动效～

实现方案

  1. JS监听浏览器 scroll 事件，不断改变元素位置
  2. background-attachment属性，将图片位置相对于视口固定
  3. translateZ()修改元素的缩小比例，使得滚动速度出现差异

JS实现

// html
<div class="parallax">
  <img src="./images/bc1.png" id="bc1" />
  <img src="./images/bc2.png" id="bc2" />
  <img src="./images/bc3.png" id="bc3" />
  <img src="./images/bc4.png" id="bc4" />
  <img src="./images/bc5.png" id="bc5" />
  <img src="./images/tree.png" id="tree" />
  <h2 id="text">Rolling Parallax</h2>
  <img src="./images/leaf.png" id="leaf" />
  <img src="./images/plant.png" id="plant" />
</div>

<div class="contentBox">
  <h2>Parallax Scrolling</h2>
  <text class="content">
    content...
  </text>
</div>

//css
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Luckiest Guy", cursive;
}
body {
  background: #f9f9f9;
  min-height: 100vh;
  overflow-x: hidden;
}
.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.parallax img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
#text {
  position: absolute;
  font-size: 5em;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 10px;
}
.contentBox {
  position: relative;
  background: #003329;
  padding: 100px;
}
.contentBox h2 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.contentBox .content {
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 2px;
}
//js
let text = document.getElementById("text");
let leaf = document.getElementById("leaf");
let bc1 = document.getElementById("bc1");
let bc4 = document.getElementById("bc4");
let bc5 = document.getElementById("bc5");

window.addEventListener("scroll", () => {
  const value = window.scrollY;
  text.style.marginTop = value * 1.5 + "px";
  leaf.style.top = value * -1.5 + "px";
  leaf.style.left = value * 1.5 + "px";
  bc1.style.top = value * 0.5 + "px";
  bc4.style.left = value * -1.5 + "px";
  bc5.style.left = value * 1.5 + "px";
});

预览效果如下

1.gif

CSS-background-attachment

前置知识

首先 background-attachment 要和 background-image 一起使用才有意义，表示的是背景图像是否固定或者随着页面的其余部分滚动。background-attachment 有四个可选值：fixed，scroll，local，inherit。scroll 是该属性的默认值，表示背景图相对于元素固定，简单理解就是两者绑定住了，所以元素滚动了图片也会跟着滚动。local 表示背景图相对于元素内容固定，而相对于其他滚动条则会滚动。举例来说，假如元素内部设置了overflow：scroll，则元素内部会出现滚动条，此时滚动元素内部滚动条的时候，背景图会随着滚动而滚动。而如果我们设置 background-attachment：scroll ，则背景图会随着元素内部滚动而固定住。fixed 表示背景图相对于视口固定，无论怎么滚动，元素都岿然不动，如果多个元素都设置了fixed，他们也只会在自己的元素内显示，互不影响。inherit 只是指定 background-attachment 的设置从父元素继承。

scroll与local的区别

scroll效果如下 2023-02-15 17.43.56.gif local效果如下 2023-02-15 17.48.44.gif

//html
<div class="image_1">
  <div class="word">Bye bye, Lucia</div>
</div>
<div class="bg">The best hard are always the bravest</div>
<div class="image_2">
  <div class="word">All children, except one, grow up</div>
</div>
<div class="bg">It's better to burn out than to fade away</div>
<div class="image_3">
  <div class="word">Fading is true while flowering is past</div>
</div>
<div class="bg">There was no possibility of taking a walk</div>
<div class="image_4">
  <div class="word">All this happened, more or less</div>
</div>

//css
* {
  padding: 0;
  margin: 0;
}
.image_1 {
  background-image: url(./images/1.webp);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.image_2 {
  background-image: url(./images/2.jpg);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.image_3 {
  background-image: url(./images/3.jpg);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.image_4 {
  background-image: url(./images/4.jpeg);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.word {
  position: relative;
  top: 480px;
  font-size: 55px;
  color: white;
  text-align: center;
  font-weight: bolder;
}
.bg {
  text-align: center;
  font-size: 46px;
  font-weight: bolder;
  height: 220px;
  line-height: 220px;
  background-color: rgb(131, 134, 204);
  color: white;
}

预览效果如下

2.gif

CSS-translateZ

前置知识

transform-style: preserve-3d表示让子元素保留3D转换。

1.jpg

好吧，直接上代码～

//html
<div class="wrapper">
  <div class="demo"></div>
</div>

//css
body {
  perspective: 800px;
  perspective-origin: 250px 300px;
}
.wrapper {
  position: relative;
  left: 200px;
  top: 100px;
  height: 480px;
  width: 60%;
  background-color: #0ff;
  transform: rotateY(45deg);
  /* transform-style: preserve-3d; */
}
.demo {
  height: 100%;
  background-image: url(./images/3.jpg);
  background-size: cover;
  transform: translateZ(100px);
}

不加preserve-3d效果

1.jpg

加上preserve-3d效果

1.jpg

看出差异了吧，有层次了，立体感高高的～
需要注意的是 transform-style: preserve-3d 这个属性加在谁身上，谁的子元素才会有3D效果，比如上面的代码中把属性加在 body 上是没有效果的。

perspective 定义3D元素距视图的距离。

简单来理解，如果我设置了 perspective：500px，则表示我在离屏幕500px远的地方观看这个元素。注意一下官方讲解的 当为元素定义 perspective 属性时，其子元素会获得透视效果，所以我们需要将这个属性设置在父元素上。

加上perspective效果

3.gif

不加perspective效果

4.gif

视距 = 距离产生美～

translateZ: 向Z轴平移。

我们现在和屏幕的距离就是Z轴，所以Z轴是朝向我们的，如果translateZ里面的值越大，说明屏幕离我们越近，translateZ里面的值越小，屏幕离我们就越远。

perspective和translateZ的化学反应

这两者有什么区别呢，简单的说就是translateZ是移动图片，perspective是移动人和屏幕的距离。但是当这两者结合起来的时候神奇的事情就会发生～

//html
<div class="wrapper">
  <div class="demo"></div>
</div>

//css
.wrapper {
  position: relative;
  left: 200px;
  top: 100px;
  height: 480px;
  width: 60%;
  perspective: 800px;
}
.demo {
  height: 100%;
  background-image: url(./images/3.jpg);
  background-size: cover;
  transform: translateZ(-100px);
}

perspective: 800px的情况

1.jpg

perspective: 100px的情况

1.jpg

我们把视距调小，图片竟然变小了，按照道理视距越小说明屏幕离我越近，图片应该变大才对。其实，这里我们看到的图片，并不是图片本体，而是图片在屏幕上的投影。

1.jpg

同理，我们去理解translateZ的值变大，图片变大也比较容易了。

translateZ(-100px)的情况

1.jpg

translateZ(-20px)的情况

1.jpg

1.jpg

那么只要我们将不同的元素的translateZ设置成不同的负值，那么越大值的元素，它的投影就会越大，滚动速度就会越快，当然这些元素的滚动速度也只有translateZ(0)的几分之一～

//html
<div class="g-container">
  <div class="section-one">translateZ(-1)</div>
  <div class="section-two">translateZ(-2)</div>
  <div class="section-three">translateZ(-3)</div>
</div>

//css
html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective: 2px;
}
.g-container {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  height: 150%;
}
.g-container div {
  font-size: 5vw;
  position: absolute;
  top: 20%;
}
.section-one {
  left: 0%;
  background: rgba(10, 10, 10, 0.2);
  transform: translateZ(-1px);
}
.section-two {
  left: 40%;
  background: rgba(30, 130, 30, 0.2);
  transform: translateZ(-2px);
}
.section-three {
  left: 90%;
  background: rgba(200, 100, 130, 0.2);
  transform: translateZ(-3px);
}

预览效果如下

6.gif

本文转载于:

https://juejin.cn/post/7200653122637103164

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

代码随想录算法训练营第三天 | 链表理论基础 、203.移除链表元素、707.设计链表、206.反转链表

代码随想录算法训练营第三天 | 链表理论基础 、203.移除链表元素、707.设计链表、206.反转链表

打卡第三天&#xff0c;今天还是认真做了两道题目&#xff0c;明天要6点早起&#xff0c;想早点睡&#xff0c;加上昨天的螺旋数组&#xff08;昨天想到怎么做&#xff0c;但是代码实现解不出来&#xff0c;还没有仔细看视频讲解&#xff09;&#xff0c;和今天的设计链表&…
阅读更多...
内网渗透(三十九)之横向移动篇-pass the ticket 票据传递攻击(PTT)横向攻击

内网渗透(三十九)之横向移动篇-pass the ticket 票据传递攻击(PTT)横向攻击

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…
阅读更多...
Pytorch 物体检测 App 体验

Pytorch 物体检测 App 体验

物体检测 App 介绍 它是使用 YOLOv5 进行对象检测的 Android 示例应用程序&#xff0c;使用 PyTorch 脚本化 YOLOv5 模型来检测使用该模型训练的 80 个物体对象。 YOLO&#xff08;You Only Look Once&#xff09;是最快和最受欢迎的对象检测模型之一&#xff0c;而YOLOv5 是…
阅读更多...
pytorch零基础实现语义分割项目（三）——语义分割模型（U-net和deeplavb3+）

pytorch零基础实现语义分割项目（三）——语义分割模型（U-net和deeplavb3+）

文章目录项目列表前言U-net模型概况下采样过程上采样过程模型代码上采样代码U-net模型构建deeplabv3模型概况模型代码resNetASPPdeeplabv3模型构建结尾项目列表 语义分割项目&#xff08;一&#xff09;——数据概况及预处理 语义分割项目&#xff08;二&#xff09;——标签…
阅读更多...
简单的组合拳

简单的组合拳

前言&#xff1a;在最近的wxb举行hw中&#xff0c;同事让我帮他看看一些后台登录站点。尝试了未授权&#xff0c;弱口令皆无果&#xff0c;要么不存在弱口令&#xff0c;要么有验证码&#xff0c;没办法绕过。本文章仅提供一个思路&#xff0c;在hw中更多时候并不推荐尝试这种思…
阅读更多...
如何正确使用 钳位二极管

如何正确使用 钳位二极管

在电路设计中，经常遇到需要IO保护的场景，比如ADC采样，GPIO接收电平信号等。 常见的保护方法有分压，限幅，限流等。本次我们讨论限幅方法中的 钳位二极管。 我们以BAT54S为例，它的符号是这样的， 而在很多手册里，我们可以看到，一般是这样使用的： 因此，我设计了简化…
阅读更多...
第五章.与学习相关技巧—正则化，超参数

第五章.与学习相关技巧—正则化，超参数

第五章.与学习相关技巧 5.4 正则化&超参数 在机器学习中&#xff0c;过拟合是一个很常见的问题。过拟合指的是只能拟合训练数据&#xff0c;但不能很好的拟合不包含在训练数据中的其他数据状态。 1.发生过拟合的原因 模型拥有大量参数&#xff0c;表现力强。训练数据少。…
阅读更多...
使用梯度下降的线性回归（Matlab代码实现）

使用梯度下降的线性回归（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 梯度下降法&#xff0c;是一种基于搜索的最优化方法&#xff0c;最用是最小化一个损失函数。梯度下降是迭代法的一种,可以用于求…
阅读更多...
【办公类-16-05-04】“2022下学期 大班运动场地分配表-跳过节日循环排序”（python 排班表系列）

【办公类-16-05-04】“2022下学期 大班运动场地分配表-跳过节日循环排序”（python 排班表系列）

样例展示&#xff1a;跳过节日的运动场地循环排序表&#xff08;8个班级8组内容 下学期一共20周&#xff09;背景需求&#xff1a;上学期做过一次大班运动场地安排&#xff0c;跳过节日。2023.2下学期运动场地排班&#xff08;跳过节日&#xff09;又来了。一、场地器械微调二、…
阅读更多...
哪里可以找到免费的 PDF 阅读编辑器？7 个免费 PDF 阅读编辑器分享

哪里可以找到免费的 PDF 阅读编辑器？7 个免费 PDF 阅读编辑器分享

如果您曾经需要编辑 PDF&#xff0c;您可能会发现很难找到免费的 PDF 编辑器。幸运的是&#xff0c;您可以使用在线资源来编辑该文档&#xff0c;而无需为软件付费。 在本文中&#xff0c;我将介绍七种不同的 PDF 编辑器&#xff0c;它们至少可以让您免费编辑几个文件。我通过…
阅读更多...
目标检测笔记(八)：自适应缩放技术Letterbox完整代码和结果展示

目标检测笔记(八)：自适应缩放技术Letterbox完整代码和结果展示

文章目录自适应缩放技术Letterbox介绍自适应缩放技术Letterbox流程自适应缩放Letterbox代码运行结果自适应缩放技术Letterbox介绍 由于数据集中存在多种不同和长宽比的样本图&#xff0c;传统的图片缩放方法按照固定尺寸来进行缩放会造成图片扭曲变形的问题。自适应缩放技术通…
阅读更多...
Qt COM组件导出源文件

Qt COM组件导出源文件

文章目录摘要dumpcpp.exe注册COM组件COM 组件转CPP参考关键字&#xff1a; Qt、 COM、 组件、 源文件、 dumpcpp摘要 由于厂家提供的库不是纯净C库&#xff0c;是基于COM组件开的库&#xff0c;在和厂家友好交流无果下&#xff0c;只能研究下Qt 如何调用&#xff0c;好在Qt 的…
阅读更多...
rt-thread pwm 多通道

rt-thread pwm 多通道

一通道pwm参考 https://blog.csdn.net/yangshengwei230612/article/details/128738351?spm1001.2014.3001.5501 以下主要是多通道与一通道的区别 芯片 stm32f407rgt6 1、配置PWM设备驱动相关宏定义 添加PWM宏定义 #define BSP_USING_PWM8 #define BSP_USING_PWM8_CH1 #d…
阅读更多...
分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊

分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊

2022年11月23日首发于掘金&#xff0c;现在同步到公众号。11. 前言大家好&#xff0c;我是若川。推荐点右上方蓝字若川视野把我的公众号设为星标。我倾力持续组织了一年多源码共读&#xff0c;感兴趣的可以加我微信 lxchuan12 参与。另外&#xff0c;想学源码&#xff0c;极力推…
阅读更多...
浙江工商大学2023年硕士研究生 入学考试初试成绩查询通知及说明

浙江工商大学2023年硕士研究生 入学考试初试成绩查询通知及说明

根据往年的情况&#xff0c;2023浙江工商大学MBA考试初试成绩可能将于2月21日下午两点公布&#xff0c;为了广大考生可以及时查询到自己的分数&#xff0c;杭州达立易考教育为大家汇总了信息。一、成绩查询考生可以登录中国研究生招生信息网&#xff08;http://yz.chsi.com.cn/…
阅读更多...
MySQL - 介绍

MySQL - 介绍

前言 本篇介绍认识MySQL&#xff0c;重装mysql操作 如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 本文开始 1.什么是数据库? 数据库: 一种通过SQL语言操作管理数据的软件; 重装数据库的卸载数据库步骤 : ① 停止MySQL服…
阅读更多...
分享96个HTML体育竞技模板，总有一款适合您

分享96个HTML体育竞技模板，总有一款适合您

分享96个HTML体育竞技模板&#xff0c;总有一款适合您 96个HTML体育竞技模板下载链接&#xff1a;https://pan.baidu.com/s/1k2vJUlbd2Boduuqqa0EWMA?pwdj8ji 提取码&#xff1a;j8ji Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 北京奥运火炬PSD模板 奥运…
阅读更多...
CCNP350-401学习笔记（101-150题）

CCNP350-401学习笔记（101-150题）

101、Refer to the exhibit SwitchC connects HR and Sales to the Core switch However, business needs require that no traffic from the Finance VLAN traverse this switch. Which command meets this requirement? A. SwitchC(config)#vtp pruning B. SwitchC(config)#…
阅读更多...
信息时代企业的核心特征-读《硅谷之谜》

信息时代企业的核心特征-读《硅谷之谜》

引言 几年前读完《浪潮之巅》上下部之后买的书&#xff0c;后来一直搁置没读&#xff0c;直到最近&#xff0c;每天晚上读一点&#xff0c;才把读完&#xff0c;虽然它说自己是《浪潮之巅》的续集&#xff0c;但是内容其实和《浪潮之巅》关系不大&#xff0c;直接读也没有什么问…
阅读更多...
再学C语言38：指针操作

再学C语言38：指针操作

C提供了6种基本的指针操作 示例代码&#xff1a; #include <stdio.h>int main(void) {int arr[5] {1, 2, 3, 4, 5};int * p1, *p2, *p3;p1 arr; // 把一个地址赋给指针p2 &arr[2]; // 把一个地址赋给指针printf("指针指向的地址&#xff0c;指针指向地址中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023