钉钉官网的滚动动画(详解)

您所在的位置：网站首页 › 网页动画效果滑动代码 › 钉钉官网的滚动动画(详解)

钉钉官网的滚动动画(详解)

2024-07-09 08:53| 来源: 网络整理| 查看: 265

钉钉官网的滚动动画

可以将滚动效果看做一个坐标轴，这时候横坐标就不是时间了，而是滚动的距离，后续会写一个函数，将滚动的距离（也就是当滚动到某一个位置的时候，滚动距离的值）传入函数，就返回给你一个value,这个value就是当你滚动到这个位置的时候，里面包裹的动画该改变的一些属性，比如opacit，transform，当然这些该变化的值又得靠一些函数计算获得。这时候就让我想起了高中逝去的数学了，全靠函数获取动态的值。

现在介绍一下这个图中的四个变量的值代表啥

scrollStart:滚动到哪一个位置的时候，触发动画，然后开始斜线的计算拿到不断变化的属性值，从而改变css样式，这个我设置的是头部完全消失就触发动画scrollEnd:滚动到哪一个位置的时候，停止触发动画，再滑动就一直保持那个样子，这时候那几个属性已经都是死的了，这个我设置的是黑色部分向上走的时候停止触发动画valueStart:刚开始的透明度和偏移量valueEnd:结束后透明度为1，偏移量自己可以设置

好啦，HTML和CSS就不用多介绍了吧~~~~

HTML

data-order="0"是控制方块出来的顺序的

ding talk HEADER FOOTER CSS * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } .header, .footer { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 4em; } .playground { height: 4000px; background: #000; } .animation-container { position: sticky; height: 100vh; top: 0; } .list { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; aspect-ratio: 2/1; border-radius: 10px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(2, 1fr); place-items: center; } .list-item { width: 60%; aspect-ratio: 1/1; background: #fff; border-radius: 10px; } .list-item:nth-child(3n + 1) { background: linear-gradient(#3e90f7, #246bf6); } .list-item:nth-child(3n + 2) { background: linear-gradient(#53b655, #469c50); } .list-item:nth-child(3n + 3) { background: linear-gradient(#f3a93c, #f4ad3d); } JS 注意：看这里看这里，一定要注意，我已经写好了写js代码当时的顺序，请大家一定要按着这个顺序看我写的函数，不然脑袋很懵喔，按照顺序看思路很清晰

图一

图二

图三

//***********第一步看这里 //拿到三个dom元素 const items = document.querySelectorAll('.list-item'); const playGround = document.querySelector('.playground'); const list = document.querySelector('.list'); //这个就是我上面提及到的函数，传入横坐标的scroll值给一个value，return出来的就是value值 function createAnimation(xStart, xEnd, yStart, yEnd) { return function (x) { //第一阶段 if (x = xEnd) { return yEnd; } //斜线部分（高中函数知识，也可以理解为yStart + ((x - xStart) * (yEnd - yStart) / (xEnd - xStart)) ） return yStart + ((x - xStart) / (xEnd - xStart)) * (yEnd - yStart); }; } //上面这个函数可以这样死调用：const p = createAnimation(100,1000,0,1) //p(100),传入的是100，就返回一个value值是1，但是这样太死了，我们滚动的时候怎么会知道传入什么值呢，所以可以想到这里的100应该又得是一个变量，而不是一个死的值 //***********第二步看这里 //做一个数据结构，也就是一个映射 //如最上面图所示： const animationMap = new Map(); //***********第五步看这里 //完善这个animationMap function updateAnimationMap() { //先清空map，因为考虑到缩放浏览器页面大小啥的需要一直计算，这里也可以不写 animationMap.clear(); //防止没有方块 if (items.length === 0) { return; } //拿到蓝色部分的矩形区域 const playGroundRect = playGround.getBoundingClientRect(); const scrollY = window.scrollY; //如上图2所示，计算出的该触发动画的滚动值也就是scrollStart值 const playGroundTop = playGroundRect.top + scrollY; //如上图3所示，结束距离，scrollEnd const playGroundBottom = playGroundRect.bottom + scrollY - window.innerHeight; //方块的矩形区域 const listRect = list.getBoundingClientRect(); //循环所以items，因为是每个小方块在动态变化样式 for (let i = 0; i { updateAnimationMap(); updateStyles(); });

呜呜呜，都学到这儿了，给博主点个赞，激励一下前端人员的奋斗吧呜呜呜~~~

【本文地址】

钉钉官网的滚动动画(详解)

钉钉官网的滚动动画(详解)

今日新闻

推荐新闻