Question

我一直在尝试根据滚动来确定如何旋转div。我有一个codepen，它演示了我想要实现的行为。

但是，我不知道使它能够与滚动一起工作。本质上，我想向下滚动并使单词 Data 逆时针旋转。如果我决定上下滚动，它应该以滚动速度移动。我只希望它向上或向下移动90度。谢谢！

var btn = document.querySelector('.button');
var btnUp = document.querySelector('.button-up')

btnUp.addEventListener('click', function() {
  document.querySelector(".parent").style.webkitTransform = "rotate(-90deg)";
  document.querySelector(".child").style.webkitTransform = "rotate(90deg)";
});

btn.addEventListener('click', function() {
  document.querySelector(".parent").style.webkitTransform = "rotate(0deg)";
  document.querySelector(".child").style.webkitTransform = "rotate(0deg)";
});

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transform: rotate(-0deg);
  transition: transform 0.7s linear;
  margin: 100px auto 30px auto;
}

.child {
  position: absolute;
  transform: rotate(-0deg);
  transition: transform 0.7s linear;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  top: 278px;
  /* -child size/2 */
  left: 130px;
  /* parent size/2 - child size/2 */
}

<div class="parent">
  <div class="child">
    Data
  </div>
</div>

<button class="button">Click Down</button>
<button class="button-up">Click Up</button>

Answer 1

添加

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

和脚本中

<script>
  AOS.init();
</script>

然后在div

<div data-aos="fade-down"></div> //you can use whatever you want's

以获取更多信息

this website帮助您实现工作原理

和

您可以在AOS Animation

中找到更多信息

如何在Div上为Div制作动画

1 个答案: