I've been brainstorming ways to rotate a div as I scroll. My goal is to recreate the effect shown in this codepen.
However, I'm struggling to implement scrolling functionality. What I envision is scrolling down causing the word Data to rotate in a counter-clockwise direction. Additionally, I want the rotation speed to be synchronized with the scrolling movement, limiting it to 90deg either up or down. Any pointers would be greatly appreciated!
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>