JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<body>
    <div id="cog"></div>
    <div id="cog1"></div>
</body>

CSS

body {
    background: #ffc;
    height: 2000px;
    margin: 0;
}

#cog {
    background: #00f;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    position: fixed;
    top: 20px;
    left: 20px;
}
#cog1 {
    background: #00f;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    position: fixed;
    top: 60px;
    left: 20px;
}

JavaScript

var $cog = $('#cog'),$cog1 = $('#cog1'),
    $body = $(document.body),
    bodyHeight = $body.height();

$(window).scroll(function () {
    $cog.css({
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
    });
    $cog1.css({
        'transform': 'rotate(' + -1*($body.scrollTop() / bodyHeight * 360) + 'deg)'
    });

});