DEV Community 👩‍💻👨‍💻

Cover image for Frontend Shorts: How to rotate the element on scroll with JavaScript
Ilona Codes for Foundsiders

Posted on • Updated on

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

❗️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.

Styled Element

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

  1. Create a function onscroll(), which will call scrollRotate() function in DOM.

  2. Find the reload-icon element via id, which will rotate by scrolling and store it into the image variable.

  3. Use transform CSS-property to manipulate the reload-icon element by rotating.

  4. 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)";
}
Enter fullscreen mode Exit fullscreen mode

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

Rotated

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 (3)

Collapse
 
sloutchevsky profile image
sloutchevsky

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

Collapse
 
sloutchevsky profile image
sloutchevsky

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)";
    }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
eduard182 profile image
eduard

how to place in several icons only in one works for me?

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!