钉钉官网的滚动动画
可以将滚动效果看做一个坐标轴,这时候横坐标就不是时间了,而是滚动的距离,后续会写一个函数,将滚动的距离(也就是当滚动到某一个位置的时候,滚动距离的值)传入函数,就返回给你一个value,这个value就是当你滚动到这个位置的时候,里面包裹的动画该改变的一些属性,比如opacit,transform,当然这些该变化的值又得靠一些函数计算获得。这时候就让我想起了高中逝去的数学了,全靠函数获取动态的值。
现在介绍一下这个图中的四个变量的值代表啥
scrollStart:滚动到哪一个位置的时候,触发动画,然后开始斜线的计算拿到不断变化的属性值,从而改变css样式,这个我设置的是头部完全消失就触发动画
scrollEnd:滚动到哪一个位置的时候,停止触发动画,再滑动就一直保持那个样子,这时候那几个属性已经都是死的了,这个我设置的是黑色部分向上走的时候停止触发动画
valueStart:刚开始的透明度和偏移量
valueEnd:结束后透明度为1,偏移量自己可以设置
好啦,HTML和CSS就不用多介绍了吧~~~~
HTML
data-order="0"是控制方块出来的顺序的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ding talk</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="header">HEADER</div>
<div class="playground">
<div class="animation-container">
<div class="list">
<div data-order="0" class="list-item"></div>
<div data-order="1" class="list-item"></div>
<div data-order="2" class="list-item"></div>
<div data-order="3" class="list-item"></div>
<div data-order="2" class="list-item"></div>
<div data-order="1" class="list-item"></div>
<div data-order="0" class="list-item"></div>
<div data-order="0" class="list-item"></div>
<div data-order="1" class="list-item"></div>
<div data-order="2" class="list-item"></div>
<div data-order="3" class="list-item"></div>
<div data-order="2" class="list-item"></div>
<div data-order="1" class="list-item"></div>
<div data-order="0" class="list-item"></div>
</div>
</div>
</div>
<div class="footer">FOOTER</div>
<script src="./index.js"></script>
</body>
</html>
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 <= xStart) {
return yStart;
}
//第三阶段
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 < items.length; i++) {
const item = items[i];
//拿到order,也就是html中写的出来的顺序,相差600个滚动位置出来下一组方块
const scrollStart = playGroundTop + item.dataset.order * 600;
const scrollEnd = playGroundBottom;
//拿到方块的宽高左右距离来使方块处于一直居中状态
const itemWidth = item.clientWidth;
const itemHeight = item.clientHeight;
const itemLeft = item.offsetLeft;
const itemTop = item.offsetTop;
//动态计算opacity属性值
const opacityAnimation = createAnimation(scrollStart, scrollEnd, 0, 1);
//动态计算scale属性值
const scaleAnimation = createAnimation(scrollStart, scrollEnd, 0.5, 1);
//动态计算translateX属性值
const translateXAnimation = createAnimation(
scrollStart,
scrollEnd,
listRect.width / 2 - itemLeft - itemWidth / 2,
0
);
//动态计算translateY属性值
const translateYAnimation = createAnimation(
scrollStart,
scrollEnd,
listRect.height / 2 - itemTop - itemHeight / 2,
0
);
//之前第三步中说到键是dom元素,值就是dom元素指向的那整个对象,所以要把这整个对象加到map中去并且是个函数
const animations = {
opacity: function (scrollY) {
//return出去的属性值,为什么要写函数,因为这个属性值也要根据动态计算
return opacityAnimation(scrollY);
},
transform: function (scrollY) {
const scaled = scaleAnimation(scrollY);
const x = translateXAnimation(scrollY);
const y = translateYAnimation(scrollY);
//用模板字符串插入到css中
return `translate(${x}px, ${y}px) scale(${scaled})`;
},
};
//将每个item加到animationMap中去
animationMap.set(item, animations);
}
}
updateAnimationMap();
//***********第三步看这里
//更新我们的样式
function updateStyles() {
//拿到当前我们滚动的位置
const scrollY = window.scrollY;
//循环map,也就是图1里面的键值对,键是dom元素,值就是dom元素指向的那整个对象,这里我写的item和animations。
//提示:这里的时候还没有得出animationMap,只是先这样写着,让自己思路清晰,一步一步来,所以得去这个函数上面继续完善animationMap函数
for (const [item, animations] of animationMap) {
//设置每一个dom元素的属性
//遍历对象,设置dom元素样式
for (const prop in animations) {
//提示:别忘记animations对象里面的属性值是一个函数喔,所以得传一个参数scrollY
item.style[prop] = animations[prop](scrollY);
}
}
}
updateStyles();
//***********第四步看这里
//监听滚动事件,调用updateStyles函数
window.addEventListener('scroll', updateStyles);
window.addEventListener('resize', () => {
updateAnimationMap();
updateStyles();
});
原文链接:https://blog.csdn.net/qq_53461589/article/details/130669674