I am currently working on an @keyframe animation that rotates a circle along its x-axis, starting from 0 degrees to 90 degrees and then back to 0 degrees. My objective is to synchronize the rotation of the circle with the user's scrolling movement on the page. The rotation should gradually increase in pace as the user scrolls down, reaching its peak at 90 degrees when the scroll count hits 160 down the page. After that, as the user continues to scroll beyond 160, I aim for the circle to incrementally rotate back to 0 degrees once they reach 280 down the page.
My initial approach involved placing the @keyframes within a class called Animation and attempting to trigger it using classList.add in JavaScript. However, this method did not yield the desired results.
If anyone has any insights or solutions to offer, I would greatly appreciate the assistance. Preferably, I am looking for a JavaScript-based solution without relying on jQuery.
function Ani(){
Ani.classList.add('Animation');
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
height: 100vh;
}
html, body {
height: 100%;
}
.one{
background-color: rgb(105, 170, 254);
}
#divItem {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: relative;
}
.triangle, .circle, .rectangle {
position: absolute;
}
.circle {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: moving;
animation-duration: 2s;
}
.Animation{
@keyframes moving {
0%{
transform:rotateX(0deg);
transform-origin: 30% 50%;
}
50%{
transform:rotateX(90deg);
transform-origin: 30% 50%;
}
100%{
transform: rotateX(0deg);
}
}
}
.two{
background-color: brown;
}
three{
background-color: bisque;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll-Trigger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="one">
<div id="divItem">
<img src="triangle.svg" class="triangle" width="150px" />
<div class="Animation">
<img src="circle.svg" class = "circle" width="150px"/>
</div>
<img src="rectangle.svg" class="rectangle" width="150px"/>
</div>
</section>
<section class="two">
</section>
<section class="three">
</section>
<script src="index.js"></script>
</body>
</html>