Frontend Shorts: How to rotate the element on scroll with JavaScript

#javascript #webdev #css #frontend

While building the animated spinner on scroll for the landing page, I thought how can be done quickly and in a few lines of code with JavaScript.

I wanted to rotate an SVG reload-icon inside the circle by scrolling up and down on the web view without using any JavaScript library like jQuery or React.

So instead, I achieved this result in a quite simple way using DOM JavaScript. Let me show you my practical implementation below:

To separate the solution from the project code, I created three files for this example: index.html, index.css, and index.js.

Let's mark up a green-yellow circle with reload icon in its center:



<!-- index.html -->
<html>
    <head>
        ...
        <link rel="stylesheet" href="index.css"> 
    </head>
    <body>
        <div class="wrapper">
                <div class="circle">
                    <img id="reload" src="reload-solid.svg" alt="scroll">
                </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

According to the HTML-tree, next, I style the elements with CSS:



/* index.css */
body {
    height: 3000px;
}

.wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: greenyellow;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

#reload {
    width: 50px;
    height: 50px;
}

❗️Notice that the height prop of the body is 3000px, it's needed to show you the rotation of the reload icon inside the green-yellow circle by scrolling.

Besides, I have centered the circle element vertically and horizontally for better preview. You can see in the circle class.

Next, we need to add a rotation effect to the element on the scroll:

Create a function onscroll(), which will call scrollRotate() function in DOM.
Find the reload-icon element via id, which will rotate by scrolling and store it into the image variable.
Use transform CSS-property to manipulate the reload-icon element by rotating.
Apply Window.pageYOffsetproperty that will return the number of pixels the document is currently scrolled along the vertical axis (up/down).



// index.js
window.onscroll = function () {
    scrollRotate();
};

function scrollRotate() {
    let image = document.getElementById("reload");
    image.style.transform = "rotate(" + window.pageYOffset/2 + "deg)";
}

👉 Window.pageYOffset/2 allows making the element rotation faster. The lower number, the faster rotation. The higher number, the slower rotation.

What we do (I mean frontend developers) is not all that unique. Often we face the problem that seems easy to solve and later refactor it to the more elegant and readable solution.

Thank you for reading! 🙏

If you liked and found this frontend short practical, it would make me happy if you shared it on Twitter.

Code your best,
Ilona Codes

Photo by Kristaps Grundsteins on Unsplash

Top comments (4)

Andrea Reed • Feb 24 • Edited

Thank you! Very clean and simple

sloutchevsky • Dec 1 '22

Thank you so much for your script, it works perfectly for one object. How do I rotate multiple objects?

sloutchevsky • Dec 1 '22

I guess for multiple objects your script should look something like this:

    window.onscroll = function () {
    scrollRotate();
    };
    function scrollRotate() {
    let wheel01 = document.getElementById("wheel01");
    wheel01.style.transform = "rotate(" + window.pageYOffset/1 + "deg)";
    let wheel02 = document.getElementById("wheel02");
    wheel02.style.transform = "rotate(" + window.pageYOffset/2 + "deg)";
    let wheel03 = document.getElementById("wheel03");
    wheel03.style.transform = "rotate(" + window.pageYOffset/3 + "deg)";
    }