Javascript 如何在每个monent'；什么州？

我想制作一个滚动事件动画，以下是步骤：

一个卡元素（div & img，让我们称之为卡）在屏幕中部；<李>

不要向下滚动

卡将旋转并缩放

向上滚动

卡将旋转并缩放回步骤1状态 因此，一般来说，在上下滚动事件中，卡会旋转和缩放，现在的问题是如何处理滚动事件和卡在每个时刻的状态之间的关系？上/下滚动将执行“反向”状态，滚动速度也会影响卡的状态

PS：这是我想关注的动画网站。

试试这个：

const el=document.querySelector（“卡片”）；
设deg=0；
设标度=1；
document.onwheel=e=>{
deg+=事件三角洲*0.09；
比例*=1+event.deltaY*-0.002；
比例=数学最小值（数学最大值（.125，比例），4）；
el.style.transform=`旋转（${deg}deg）`；
el.style.transform+=`scale（${scale}）`；
}

#卡{
高度：50px；
宽度：50px；
背景色：#66CCFF；
}

我试图模仿您在问题中提到的链接的滚动动画 下面是输出（它只是其中的一部分，不要使用GIF的fps，它的输出更加平滑）

我所做的是根据scrollY的一些值更改了卡的transform属性

在这里，我使用了某些滚动值，如130017502950等来链接动画

现在在scrollY0.52（这里0.52是delta S）从1开始的情况下

当scrollY=1时，我将从1中减去（0.52/1300） 缩放值的变化取决于滚动值

因此，我们可以应用此表达式来实现缩放动画

1-（（0.52）/1300）*（滚动））

现在，当谈到初始点不是0的情况时，我们通过从scrollY中减去初始点来将其移到0

在案例2中（滚动介于1300和1750之间）

两者之间的元件总数=1750-1300=450

这里我给出了旋转动画wrt x轴

初始rotateX值=10度，最终rotateX值=70度

因此，当它达到scrollY=1750时，我想将值增加60度。因此，delta Rx=60度

scrollY的初始值不等于0时的一般公式（本例中为1300）

（初始旋转值+（滚动初始滚动值）*（增量Rx/元素总数））

或

（10+（滚动-1300）*（60/450））度

因此，我们可以使用上面这样的表达式来操纵变换属性的值（只需将delta Rx替换为delta Ry、delta Rz、delta s等）或顶部和左侧属性

请全屏观看

var-card=document.getElementsByClassName（'card'）[0]；
var parent=document.getElementsByClassName（'parent'）[0]；
var end=document.getElementsByClassName（'end'）[0]；
addEventListener（'scroll'，function（）{
var scrollY=window.scrollY；
如果（滚动1300和滚动1750）{
var端点=2950；
范围=终点-1750；
parent.style.position=“固定”；
parent.style.marginTop=“0px”；
parent.style.left=895-（（滚动-1750）*（120/范围））+“px”；
card.style.transform=“rotateY”（+（-25）+（（scrollY-1750）*（25/范围））+”deg）rotateX（+（70-（（scrollY-1750）*（70/范围）））+”deg）rotateZ（+（-174）+（（scrollY-1750）*（84/范围））+”deg）”+
“比例”（+（0.48+（（滚动-1750）*（2.3/范围）））+”，“+（0.48+（（滚动-1750）*（3.426/范围）））+”；
card.style.filter=“亮度（“+（100-（（滚动-1750）*（50/范围）））+”）”；
如果（滚动>结束点）{
card.style.transform=“rotateY（0度）rotateX（0度）rotateZ（90度）标度（2.78,4.036）”；
card.style.filter=“亮度（50%）”；
parent.style.left=“775px”；
parent.style.position=“绝对”；
parent.style.marginTop=终点+px；
end.style.opacity=“1”；
}
}
var opac=滚动>结束点？“1”：“0”；
end.style.opacity=opac；
});
*{
边际：0px；
填充：0px；
字体系列：“arial”；
}
身体{
高度：4300px；
溢出x：隐藏；
宽度：100%；
}
.家长{
顶部：200px；
左：1150px；
位置：固定；
}
.卡片{
顶部：200px；
左：1150px；
背景色：#6154C1；
高度：500px；
宽度：350px；
颜色：白色；
边界半径：20px；
变换原点：50%；
变换样式：保留-3d；
变换：rotateY（-20度）rotateX（10度）；
}
.content_1{
填充：100px 100px；
高度：100vh；
宽度：100%；
}
.content_1 h1{
字体大小：60px；
}
.content_1 p{
边缘顶部：25px；
字体大小：22px；
宽度：60%；
}
.完{
位置：绝对位置；
高度：100vh；
宽度：100%；
过渡：0.4s；
顶部：505px；
左：0px；
不透明度：0；
利润上限：2950px；
}
.完h1{
颜色：白色；
字体大小：250px；
填充顶部：300px；
字母间距：8px；
字体大小：正常；
文本对齐：居中；
}

结局
标题
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克抬起头来
其中一个比较晦涩的拉丁语单词，concertetur，来自《洛伦·伊普斯姆》的一段文字，通过对古典文学中该词的引用，发现了这个毫无疑问的来源。Lorem Ipsum来自“de Finibus Bonorum”第1.10.32节和第1.10.33节
西塞罗于公元前45年创作的《爱与恶的极端》。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet…”来自第节中的一行
1.10.32. 以下是自1500年代以来使用的Lorem Ipsum的标准块，供感兴趣的人参考。Ci“de Finibus Bonorum et Malorum”第1.10.32节和第1.10.33节