javascript - 如何处理每个时刻状态下的动画滚动事件？

标签 javascript css animation

我想做一个滚动事件动画，步骤如下:

  1. 屏幕中间有一个卡片元素(div&img，我们命名为CARD)；
  2. 向下滚动；
  3. 卡片将旋转和缩放；
  4. 向上滚动；
  5. CARD 将旋转并缩放回步骤 1 状态；

一般来说，CARD在上下滚动事件中都会旋转和缩放，现在的问题是如何处理每一时刻的滚动事件和CARD状态之间的关系？向上/向下滚动将执行“类似反向”状态，滚动速度也会影响 CARD 状态。

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

最佳答案

我尝试模仿您在问题中提到的链接的滚动动画

下面是输出(只是其中的一部分，不以GIF的fps为准，输出更流畅) enter image description here

我所做的是根据scrollY的某些值更改了卡片的变换属性。

这里我使用了某些scrollY值，例如1300、1750、2950等来链接动画。

现在在scrollY<=1300的情况下

我给出了旋转动画，直到滚动Y达到1300。

enter image description here

所以最终点=1300，初始点=0。

两者之间的元素总数=1300-0=1300。

假设我希望元素逆时针旋转约 174 度。(正如我在代码中所做的那样)。 所以当scrollY=1300时我想旋转 Angular 为-174deg。 因此，当scrollY=1时，旋转 Angular 将为(-174/1300)，对于scrollY=2，旋转 Angular 将为2*(-174/1300)，依此类推 因此该值取决于scrollY 因此，这种情况下的通用表达式为 =-((scrollY)*(174/1300))。

对于scale属性，当scrollY达到1300时，我想将其缩小到常规大小的0.48倍。

初始比例值=1 最终比例值=0.48，

现在，为了在scrollY=1300时获得比例值0.48，我必须从1中减去(1-0.48)=>0.52(这里0.52是delta S)

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

因此我们可以应用这个表达式来实现缩放动画 1-(((0.52)/1300)*(scrollY))

现在当涉及到初始点不为0的情况时，我们通过从scrollY中减去初始点将其移至0

情况2(scrollY位于1300和1750之间)

enter image description here

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

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

初始旋转X值=10度，最终旋转X值=70度。

所以我想当达到scrollY=1750时将值增加60deg。因此delta Rx=60deg

scrollY初始值不等于0时的通用公式(本例为1300) (初始旋转值+(scrollY-初始scrollY值)*(delta Rx/元素总数))

或

(10 +(scrollY-1300)*(60/450))deg

因此，我们可以使用上面这样的表达式来操作变换属性的值(只需将 delta Rx 替换为 delta Ry 、delta Rz 、delta S 等)或 top 和 left 属性。

全屏查看此内容

var card = document.getElementsByClassName('card')[0];
var parent = document.getElementsByClassName('parent')[0];
var end = document.getElementsByClassName('end')[0];

window.addEventListener('scroll', function() {

  var scrollY = window.scrollY;

  if (scrollY <= 1300) {
    card.style.marginTop = "0px";
    card.style.transform = " rotateY(-25deg)rotateX(10deg)rotateZ(" + (-scrollY) * (174 / 1300) + "deg)scale(" + (1 - ((0.52 / 1300) * scrollY)) + ")"; //scale(0.48);rotateZ(174.4);   
    parent.style.top = "200px";
    parent.style.left = "1150px";
  }

  if (scrollY > 1300 && scrollY <= 1750) {
    var top_init = 200;
    var left_init = 1150;
    var range = 1750 - 1300;

    parent.style.position = "fixed";
    parent.style.marginTop = "0px";

    card.style.transform = " rotateY(-25deg)rotateX(" + (10 + (scrollY - 1300) * (60 / range)) + "deg)rotateZ(-174deg)scale(0.48)";

    parent.style.top = top_init + ((scrollY - 1300) * ((750 - 200) / range)) + "px";
    parent.style.left = left_init - ((scrollY - 1300) * ((1405 - 1150) / range)) + "px";

    if (scrollY == 1950) {
      card.style.transform = " rotateY(-25deg)rotateX(70deg)rotateZ(-174deg)scale(0.48)";
      parent.style.top = "750px";
      parent.style.left = "1405px";
    }

  }

  if (scrollY > 1750) {
    var end_point = 2950;
    range = end_point - 1750;

    parent.style.position = "fixed";
    parent.style.marginTop = "0px";
    parent.style.left = 895 - ((scrollY - 1750) * (120 / range)) + "px";

    card.style.transform = "rotateY(" + ((-25) + ((scrollY - 1750) * (25 / range))) + "deg)rotateX(" + (70 - ((scrollY - 1750) * (70 / range))) + "deg)rotateZ(" + ((-174) + ((scrollY - 1750) * (84 / range))) + "deg)" +
      "scale(" + (0.48 + ((scrollY - 1750) * (2.3 / range))) + "," + (0.48 + ((scrollY - 1750) * (3.426 / range))) + ")";
    card.style.filter = "brightness(" + (100 - ((scrollY - 1750) * (50 / range))) + "%)";


    if (scrollY > end_point) {
      card.style.transform = "rotateY(0deg)rotateX(0deg)rotateZ(90deg)scale(2.78,4.036)";
      card.style.filter = "brightness(50%)";
      parent.style.left = "775px";
      parent.style.position = "absolute";
      parent.style.marginTop = end_point + "px";
      end.style.opacity = "1";
    }
  }

  var opac = scrollY > end_point ? "1" : "0";
  end.style.opacity = opac;

});
* {
  margin: 0px;
  padding: 0px;
  font-family: 'arial';
}

body {
  height: 4300px;
  overflow-x: hidden;
  width: 100%;
}

.parent {
  top: 200px;
  left: 1150px;
  position: fixed;
}

.card {
  top: 200px;
  left: 1150px;
  background-color: #6154C1;
  height: 500px;
  width: 350px;
  color: white;
  border-radius: 20px;
  transform-origin: 50%;
  transform-style: preserve-3d;
  transform: rotateY(-20deg)rotateX(10deg);
}

.content_1 {
  padding: 100px 100px;
  height: 100vh;
  width: 100%;
}

.content_1 h1 {
  font-size: 60px;
}

.content_1 p {
  margin-top: 25px;
  font-size: 22px;
  width: 60%;
}

.end {
  position: absolute;
  height: 100vh;
  width: 100%;
  transition: 0.4s;
  top: 505px;
  left: 0px;
  opacity: 0;
  margin-top: 2950px;
}

.end h1 {
  color: white;
  font-size: 250px;
  padding-top: 300px;
  letter-spacing: 8px;
  font-weight: normal;
  text-align: center;
}
<div class="parent">
  <div class="card">
    <div class="chip"></div>

  </div>

</div>
<div class="end">
  <h1>THE END</h1>
</div>
<div class="content_1">
  <h1>Heading</h1>

  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>

  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>
<div class="content_1">
  <h1>Heading</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>

关于javascript - 如何处理每个时刻状态下的动画滚动事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65526570/

上一篇：c# - 当我使用 Invoke 调用我想要使用的方法时，我无法再调用它？

下一篇：python - 如何使用用户输入创建类实例？

相关文章：

css - Grails - 插件的 css 文件中的图像在 war 中需要与 run-app 不同的路径

javascript - 为什么我收到错误 : TypeError: "_co.form.submit is not a function"?

javascript - 用纯 Javascript 交换默认选择的选择选项

javascript - AMP 需要异步 js；有没有办法进行本地回退？

html - z-index 属性不起作用

css - Div 在另一个 div 中不可见

javascript - 检测实际可用的计算和处理能力浏览器javascript

ios - 如何对 subview 进行动画处理，使其仅在框架范围内进行动画处理？

animation - IE10 - CSS 动画不工作

javascript - React 组件动画

©2024 IT工具网  联系我们