JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<script src="http://jackrugile.com/js/jquery.transform.js"></script>
<div id="page">
</div>
<div id="gear">
    <img src="http://jackrugile.com/images/misc/gear-img.png" id="gear-img" />
</div>

CSS

html, body {
    margin: 0;  
    padding: 0; 
}

#page {
    background: url('http://jackrugile.com/images/misc/page-bg.png') repeat-y right top;
    border-left: 2px solid #eee;
    height: 3000px;
    margin: 0 auto;
    width: 500px;    
}

#gear {
    top: 5px;
    height: 107px;
    left: 50%;
    margin: 0 0 0 233px;
    position: fixed;
    width: 116px;    
}

JavaScript

$(document).scroll(function(){
    var scrolled = $(this).scrollTop()*1.5;           
    $('#gear-img').css({rotate: scrolled+'deg'});            
});