JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div class="gear left_pulley">
    <img src="http://simpleicon.com/wp-content/uploads/gear-1.png" />
</div>
<div class="gear right_pulley">
    <img src="http://simpleicon.com/wp-content/uploads/gear-1.png" />
</div>

CSS

body {
    height:1500px;
}
.left_pulley {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 263px;
    left: 87%;
    height: 35px;
    width: 35px;
}
.left_pulley img {
    width: 100%;
}
.right_pulley {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 263px;
    left: 94.2%;
    height: 35px;
    width: 35px;
}
.right_pulley img {
    width: 100%;
}

JavaScript

var $gearLeft = $('.left_pulley'),
    $gearRight = $('.right_pulley'),
    $i = 0,
    $j = 0,
    $scrollBefore = 0;
$(window).scroll(function () {
	if($(this).scrollTop() > $scrollBefore){
    	$scrollBefore = $(this).scrollTop();
    	$gearLeft.css("transform", "rotate(" + ($i+=4) + "deg)");
        $gearRight.css("transform", "rotate(" + ($j-=4) + "deg)"); 
    }else if($(this).scrollTop() < $scrollBefore){
       $scrollBefore = $(this).scrollTop();
        $gearLeft.css("transform", "rotate(" + ($i-=4) + "deg)");
    	$gearRight.css("transform", "rotate(" + ($j+=4) + "deg)"); 
    }
});