DEV Community

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

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

ilonacodes profile image Ilona Codes Updated on ・2 min read

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

Discussion (0)

Forem Open with the Forem app