如何在滚动上为 Div 设置动画

Question

I have been trying to figure out how to rotate a div based off of my scrolling. I have a codepen that demonstrates the behaviour that I would like to achieve.

However, I do not know hot to make it work with scrolling. Essentially, I would like to scroll down and have the word Data move in a counter-clockwise rotation. And if I decide to scroll up and down it should move with the speed of the scroll. I only want it to move 90deg up or down. Thanks!

 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

Add

<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>

and in script

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

then in div

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

for further information

this website helps you on how to make it work

and

You can find out more at AOS Animation