“钉钉官网首页的炫酷动效” 被我用css新特性轻松破解啦~

news2024/12/23 10:43:52

屏幕录制2023-09-01 下午2.35.41.gif

🌻 前言

其实写本文的初衷只是想分享一个css新特性【scroll-timeline】😂,但是我想要体现出它的强大效果,此时正好想到了之前看到过钉钉的首页动画,就是滚动页面然后进行一系列动画的,所以我决定实现一下这个效果。(见上方动图,只是实现了大体效果,细节没有优化,各位看官多多担待🙈)

它是干什么用的呢?
一句话概括为:“用滚动区域的滚动动作驱动动画的进度”

可能有些同学还不太懂,我再稍加解释。我们以往的animation都是以时间作为动画的时间线的,比如我们需要设置动画的总时长animation-durationn 秒,那么动画在进行 n 秒后,就会处于 100% 的状态。

而当我们使用了scroll-timeline之后,以滚动动作驱动动画的进度,那么就是我们在滚动区域滚到底时,动画就会处于100%状态,即滚动了百分之多少,动画就会进行百分之多少。还不明白可以体验下方的小demo👇👇👇

jcode

以前如果要实现这种效果,往往得监听 scroll 事件,用js动画实现,总体来说非常复杂,但是有了这个新特性之后,为css的创造性又提升了一个台阶。

🛠 API 使用方法

1️⃣ 首先我们需要在滚动区域上定义一个滚动时间线,滚动时间线需要设置两个值:

  1. scroll-timeline-name: 命名的滚动进度时间线的名称;
  2. scroll-timeline-axis: 以哪个方向的滚动条驱动动画,即滚动方向;

可选的滚动方向有:

  • block: 滚动条元素块轴上的滚动条,该轴垂直于一行中的文本流的方向。对于水平书写模式,如标准英语,这与y相同,而对于垂直书写模式,它与x相同。这是默认值。
  • inline: 滚动条元素的内联轴上的滚动条,该轴与一行中的文本流平行。对于水平写入模式,这与x相同,而对于垂直写入模式,它与y相同。
  • x(Firefox语法为 vertical): 滚动区域垂直轴上的滚动条;
  • y(Firefox语法为 horizontal): 滚动区域水平轴上的滚动条。

2️⃣ 然后在滚动区域内需要执行动画的元素上,将动画时间线设置为我们定义的滚动时间线的名称。设置完成后,该元素的动画进度就会变成通过滚动动作驱动。

🍺 实现钉钉首页特效

1. 总体分析

经过我十几分钟的分析,将这个复杂的特效切割成了三部分:

  1. logo部分向上,向屏幕外移动,滚动一段时间后不透明度逐渐降低,最终从上方消失;
  2. 色块有3d的深度效果,滚动时逐渐向屏幕外扩散,并最终都移动到屏幕外;
  3. 菜单面板在logo快消失时,从屏幕中心一个点逐渐扩散开来,并在快扩散成型时出现灰色背景;

分析结束后,开始动工✊。

image.png

image.png

image.png

2. 整体布局

首先创建一个宽高满屏的div,为了方便后面描述,我们叫这个div为【滚动盒子】,并设置黑色背景。
然后添加一个子元素,设置高度大于100%,这样父元素就能滚动了,不然无法驱动动画执行,这里我随便设置了高度200%。

那么有动效的元素(我暂且叫它【动效盒子】)在滚动盒子中如何定位呢,总不能就在文档流中吧,那岂不是滚动区域滚动的时候,整个动效盒子也会被来回滚动,甚至滚出可视区域。这样显然是不行的,并且设置 absolute 绝对定位也是不行的,同样会跟随滚动。

得出结论: 为了让动效盒子不在滚动盒子内滚动,只能考虑 fixed 固定定位和 sticky 粘性定位,两者都可以实现,但是 fixed 定位不太灵活,一旦修改滚动盒子的位置,就得跟着调整动效盒子的位置。所以最终我给动效盒子设置宽高100%,并粘性定位于滚动盒子顶部

布局结构大致如下:

:root {
  --mainHeight: 100vh;
}

#container {
  position: relative;
  height: var(--mainHeight);
  overflow-x: hidden;
  overflow-y: scroll;
  background: #040506;
}

#stretcher {
  height: calc(2 * var(--mainHeight));
}

main {
  pointer-events: none;
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--mainHeight);
  overflow: hidden;
}


//滚动盒子
 <div id="container">
    //动效盒子
    <main>
       //这里面是实现动效的元素
    </main>
    
    //撑开父元素高度,让父元素可以滚动
    <div id="stretcher"></div>
 </div>

3. logo动效

因为动效是 3D动效,所以我们先在动效盒子设置下3D效果和视距:

main{
    transform-style: preserve-3d;
    perspective: 500px;
}

然后就是设置lodo的动画了,运动轨迹很简单,translate3d向上向屏幕外移动就行了,因为logo在消失之后还会继续面板动效,所以我假定logo动效大概占总动效时长 2/3。将动画绑定了滚动时间线后,只需要观察在logo从顶部消失时,滚动条大概滚动了 2/3 即可,慢慢调整参数。

❗需要注意的是:因为logo是在快移动出屏幕时才逐渐变透明,所以需要单独设置个透明度变化的animation。

.logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  animation-name: logo,logohide;
  animation-fill-mode: forwards;
  animation-timeline: --squareTimeline;
}
@keyframes logo {
  100% {
    transform: translate3d(-50%, -400px, 500px) scale(.6);
  }
}
@keyframes logohide {
  55%{
    opacity: 1;
  }
  63%,100% {
    opacity: .2;
  }
}

logo.gif

4. 色块动效

色块动效和logo动效差不多,也是 translate3d 的变化。因为他们作为一个整体在运动,新建个色块盒子,所有色块都扔里面设置绝对定位,通过 translateZ 呈现3d效果。

.blocks {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  animation-name: block;
  animation-fill-mode: forwards;
  animation-timeline: --homeTimeline;
  transform-style: preserve-3d;
  perspective: 500px;
}

.blocks span {
  --color: red;
  --left: 10%;
  --top: 10%;
  --z: 0;
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--color);
  transform: translateZ(var(--z));
}

@keyframes block {
  100% {
    transform: translate3d(-50%, -500px, 300px);
    width: 270%;
  }
}
    

 <!-- 色块部分 -->
  <div class="blocks">
    <!-- 左色块 -->
    <span style="--color:#261758;--left: 26%;--top: 40%;--z: 120px"></span>
    <span style="--color:#c8940b;--left: 10%;--top: 60%;--z: -50px"></span>
    <span style="--color:#2059a3;--left: 15%;--top: 100%;--z: -200px"></span>
    <span style="--color:#562c0e;--left: 5%;--top: 90%;--z: -60px"></span>
    <!-- 上色块 -->
    <span style="--color:#051235;--left: 50%;--top: 40%;--z: 20px"></span>
    <span style="--color:#17113a;--left: 40%;--top: 30%;--z: -40px"></span>
    <span style="--color:#06143a;--left: 45%;--top: 70%;--z: -250px"></span>

    <!-- 右色块 -->
    <span style="--color:#072e90;--left: 70%;--top: 40%;--z: 100px"></span>
    <span style="--color:#0ca15b;--left: 80%;--top: 60%;--z: -50px"></span>
    <span style="--color:#479ec8;--left: 76%;--top: 70%;--z: 50px"></span>

    <!-- 下色块 -->
    <span style="--color:#072e90;--left: 75%;--top: 150%;--z: -300px"></span>
    <span style="--color:#061640;--left: 30%;--top: 125%;--z: -200px"></span>
  </div>
</main>
<div id="stretcher"></div>

色块.gif

5. 面板动效

面板动效是最复杂的,整体呈现为从中心点扩散成列表模式。逆向思维一下,其实这个动画的实质是先设置成列表形式,然后在动画 0% 时将所有元素移动缩小到中心点。

麻烦点来了,怎么确定每个元素移动的距离就能移动到面板中心点呢?我想了个办法,我先在面板中心显示了一个小点,如下:

7851693548650_.pic.jpg

然后在控制台不断设置元素的 translte 移动距离,直至和小点重合(先把元素scale成一个小点)。这样就可以很轻松获取到每个元素位移到中心点的距离。(ps:因为每行有7个元素,其实只需要调试获取到第一行的前四个元素的tanslate距离就行,第一行后面的三个就是把前面三个点x改为负值,第二行则负复制第一行,把y全部改为负值)

mianban.gif

可以看到,已经成功实现了图标从中心点扩散,但似乎叮叮的图标像是一个一个出来的,所以还需要改进。
观察叮叮的面板动效得知,图标是从最外侧的两列开始出现,然后再是里面的两列,以此类推。

简单,只需要设置动画延迟就行。但是被绑定滚动时间线的动画无法设置 animation-delay 动画延迟,那只能在动画内容里下文章,1,7列是45%开始移动,2,6列是50%开始移动,3,5列55%开始移动,最中心第4列60%开始移动。

面板背景色显示逻辑差不多,在动画70%时再开始设置背景色。

面板完成1.gif

🧐🧐🧐 emmmm,差不多了,就这样吧~ 完结撒花🌸🌸🌸

效果体验

点击码上掘金右上角“查看详情” 滚动鼠标滚轮查看效果。只是实现了大体动效,没有调整细节,多调调参数应该可以做到和钉钉首页99%相似度。

钉钉应该是用js监听滚动实现的这个复杂效果,可以看到,当我们使用css新特性 scroll-timeline 之后,这个动效完全就可以用纯css实现了,简单了很多🥳🥳🥳

jcode

最后

我是喜欢归纳总结前端相关知识的前端阿彬,尽力持续输出原创优质文章,欢迎点赞关注😘

表情包2.webp

往期文章
# 🐿 CSS魔术师Houdini,用浏览器引擎实现高级CSS效果
# ☕ 通过和vue语法逐一比对,快速上手前端框架黑马svelte
# 🧙‍♀️css魔法:伪元素content ➕ css函数
# 玩转css逐帧动画,纯css让哥哥动起来💃
# ⛳前端进阶:SEO 全方位解决方案
# 我给自己搭建的前端导航网站,你们都别用🤪
# 2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!
# 浅谈 强制缓存/协商缓存 怎么用?
# 2023 前端性能优化清单

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

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

相关文章

ChatGPT AIGC 完成动态堆积面积图实例

先使用ChatGPT AIGC描述一下堆积面积图的功能与作用。 接下来一起看一下ChatGPT做出的动态可视化效果图: 这样的动态图案例代码使用ChatGPT AIGC完成。 将完整代码复制如下: <!DOCTYPE html> <html> <head><meta charset="utf-8"><tit…

为反应系统实现MQTT客户端

MQTT-Reactive的目的是提供一种用C编写的可移植且无阻塞的MQTT客户端&#xff0c;以便在反应式嵌入式系统中使用。首先&#xff0c;本文说明什么是反应系统。然后&#xff0c;它描述了如何为这种系统设计合适的软件结构。最后&#xff0c;本文展示了如何通过使用状态机和事件驱…

【校招VIP】测试技术考点之单元测试集成测试

考点介绍&#xff1a; 单元测试,集成测试的区别是&#xff1a;方式不同、粒度不同、内容不同。单元测试用用于验证编码单元的正确性。集成测试用于验证详细设计。体现了测试由小到大、又内至外、循序渐进的测试过程和分而治之的思想。 测试技术考点之单元测试&集成测试-相…

WIN11有网络但浏览器打不开

打开设置-》网络和INTERNET-》代理&#xff0c;将自动检测设置打开&#xff0c;将手动设置代理中的使用代理服务器关闭。就可以打开浏览器了。 不知道为什么会出现这样的问题

【数据分享】2009-2021年我国省份级别的轨道交通相关指标(30多项指标)

《中国城市建设统计年鉴》中细致地统计了我国城市市政公用设施建设与发展情况&#xff0c;在之前的文章中&#xff0c;我们分享过基于2006-2021年《中国城市建设统计年鉴》整理的2006—2021年我国省份级别的市政设施水平相关指标、2006-2021年我国省份级别的各类建设用地面积数…

vue3 搭配ElementPlus做基础表单校验 自定义表单校验

<script setup> import { ref, reactive } from vue// 表单元素 const dom ref(null) // 校验规则 const rules {name: [{ required: true, message: 请输入活动名称, trigger: blur }],//校验手机号格式phone: [{ required: true, message: "请输入电话", t…

问道管理:证券市场也有中介机构吗?他们具体干什么?

证券市场是一个很大的发行流通生意市场&#xff0c;在这个市场上&#xff0c;有许许多多不同的生意主体。而有生意就会有中介&#xff0c;证券市场上也有中介组织吗&#xff1f;如果有&#xff0c;他们具体又是干什么的&#xff1f;关于这些&#xff0c;问道管理为我们预备了以…

使命召唤中将启用AI检测仇恨言论!

“ToxMod”将自动标记口头骚扰、欺凌和歧视。 周三&#xff0c;动视宣布的它将在即将于11月10日发布的中引入实时人工智能语音聊天调节功能使命召唤:现代战争3。该公司正与调整为了实现这一特性&#xff0c;我们使用了一种叫做托西莫德识别仇恨言论、欺凌、骚扰和歧视并采取行动…

【云原生】容器编排工具Kubernetes

目录 一、 K8S介绍 官网地址&#xff1a; 1.1docker编排与k8s编排相比 1.2特性 1.3功能 二、K8S重要组件 2.1核心组件 &#xff08;1&#xff09;Kube-apiserver &#xff08;2&#xff09;Kube-controller-manager &#xff08;3&#xff09;Kube-scheduler &#x…

前端自动化部署,Devops,CI/CD

DevOps 提到 Jenkins&#xff0c;想到的第一个概念就是 CI/CD 在这之前应该再了解一个概念。 DevOps Development 和 Operations 的组合&#xff0c;是一种方法论&#xff0c;并不特指某种技术或者工具。DevOps 是一种重视 Dev 开发人员和 Ops 运维人员之间沟通、协作的流程。…

打造高效外卖外送商城系统:代码示例和关键功能介绍

随着外卖外送服务的普及&#xff0c;开发一款高效的外卖外送商城系统对于餐馆和食品供应商来说至关重要。这篇文章将为您提供一个简单的外卖外送商城系统的示例代码&#xff0c;并介绍关键功能&#xff0c;以帮助您了解这类系统的工作原理和关键部分。 1. 准备工作 首先&…

搭建harbor

1.安装docker curl -sfL https://get.rainbond.com/install_docker | bash2.安装docker-compose yum install -y docker-compose3.安装harbor 在线离线包下载 选一个喜欢的右击复制链接下载地址 wget https://ghproxy.com/https://github.com/goharbor/harbor/releases/dow…

opencv-4.5.2-android-sdk.zip安装教程

opencv-4.5.2-android-sdk.zip&#xff1a; 下载链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;s0p2 导入模块的方法: ①、导入模块 ②、定位到sdk目录 点击ok就行&#xff0c;就导入成功了。导入成功后会多出一个可展开的opencv文件夹(自己命名的),一定要能展…

MyBatis中至关重要的关系映射----全方面介绍

目录 一 对于映射的概念 1.1 三种关系映射 1.2 resultType与resultMap的区别 resultType&#xff1a; resultMap&#xff1a; 二&#xff0c;一对一关联查询 2.1 嵌套结果集编写 2.2 案例演示 三&#xff0c;一对多关联查询 3.1 嵌套结果集编写 3.3 案例演示 四&…

使用命令行创建仓库

如果你还没有任何代码&#xff0c;可以通过命令行工具创建一个全新的Git仓库并初始化到本项目仓库中。 git clone https://e.coding.net/***/neurosens.git cd neurosens echo "# neurosens" >> README.md git add README.md git commit -m "first commi…

Springboot使用hikari连接池进行Kerberos认证访问Impala

springboot-kerberos-hikari-impala Springboot使用hikari连接池并进行Kerberos认证访问Impala的演示项目 Springboot使用hikari连接池并进行Kerberos认证访问Impala的demo地址:https://github.com/Raray-chuan/springboot-kerberos-hikari-impala 修改后的Hikari源码地址:h…

详解4种类型的爬虫技术

聚焦网络爬虫是“面向特定主题需求”的一种爬虫程序&#xff0c;而通用网络爬虫则是捜索引擎抓取系统&#xff08;Baidu、Google、Yahoo等&#xff09;的重要组成部分&#xff0c;主要目的是将互联网上的网页下载到本地&#xff0c;形成一个互联网内容的镜像备份。 增量抓取意…

sqli-labs闯关

less-01: less-08: less-11: less-18: less-19: less-20: Sqli-labs项目地址—Github 使用HackBar插件 less-01: Sqli-labs前20关均为数字型注入 Sqli-labs前四关较为类似以less-01为模板 将网址导入HackBar中&#xff1a; 1.根据提示&#xff0c;输入http://127.0.0.…

laragon 为 php 安装 Xdebug 扩展

众所周知&#xff0c;php 自带的 var_dump() 输出格式很不直观 而 laragon 作为很好的 windos 下开发环境很受欢迎&#xff0c;本文就介绍如何快速为 laragon 的 php 安装 Xdebug&#xff0c;方便开发调试 一&#xff1a;启动开发环境&#xff0c;在任意可访问 php 页面中输出 …

Matlab中fdatool结合STM32F4设计滤波器

数字滤波器的原理 1.从功能上分&#xff1b;低通、带通、高通、带阻。滤波器口诀&#xff1a;低通滤高频&#xff1b;高通滤低频&#xff1b;带通滤两边&#xff1b;带阻阻中间&#xff1b; 2.从实现方法上分:FIR、IIR 3.从设计方法上来分&#xff1a;Chebyshev(切比雪夫&…