JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<div id="div">

<img src="http://www.contrastrebellion.com/public/images/logo-bg.png" width="290" height="290" style="-webkit-transform: rotate(0deg); " />
<img  src="http://t3.gstatic.com/images?q=tbn:ANd9GcSVQXKCc1zsjS0Tm8YfHB2Mgv18FvDyci93Ksafsw-_2Vai9ZO6" width="290" height="290" style="-webkit-transform: rotate(0deg); " />
</div>

CSS

#div {
    height:1600px;
    overflow:auto;
    width:350px;
}

#div img {
    margin-top:400px;
}

JavaScript

var sdegree = 0;


var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       sdegree += 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   } else {
      sdegree -= 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   }
   lastScrollTop = st;
});