gear rotate on scroll

by Alexandru Gatea

HTML

<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1241-200.png">
<p class="lorem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie leo in augue malesuada, eu lobortis nisl vehicula. Maecenas malesuada felis nec purus eleifend, sit amet egestas nisl tincidunt. Nulla malesuada blandit erat, at lacinia leo rhoncus
  ac. Vestibulum hendrerit augue lacus, in laoreet nibh vulputate in. Sed viverra lectus magna. Mauris ullamcorper lobortis ligula vitae pretium. Vestibulum vel ex sed libero sollicitudin varius. Fusce varius nunc dolor, mollis porttitor augue tempor
  sed. Nunc non iaculis metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at fringilla ipsum, vitae bibendum massa. Fusce magna neque, congue vitae fermentum luctus, vestibulum in erat. Sed ut aliquam
  diam. Ut ut condimentum risus. Maecenas bibendum nibh in urna ullamcorper, vitae eleifend nulla condimentum. Quisque eleifend nibh lorem, vitae pharetra urna tincidunt vitae. Vivamus eget accumsan massa, eget bibendum mi. Sed sem turpis, luctus id arcu
  vel, dapibus consectetur tellus. Donec et blandit lacus. Aliquam euismod leo dui, ut luctus diam mollis ultrices. Sed maximus interdum lectus, sed viverra felis bibendum a. Sed posuere erat et tincidunt egestas. Quisque eu dui eu nisl pellentesque sollicitudin.
  Vivamus bibendum magna ornare arcu consequat pharetra. Aliquam malesuada mollis nunc, non luctus augue sodales nec. Vestibulum id finibus diam. In et augue viverra, ultrices neque nec, commodo ipsum. Vivamus consequat dolor turpis, nec imperdiet elit
  molestie nec. Etiam at efficitur justo, id vestibulum justo. Quisque tristique sem sit amet dolor laoreet pulvinar. Fusce ut dui et orci bibendum sodales a id mauris. Ut rhoncus nisi in dictum suscipit. Nulla fermentum hendrerit pharetra. Ut nec ante
  ut diam porttitor varius. Nullam malesuada justo aliquam ullamcorper gravida. Lorem ipsum dolor sit amet, consectetur...

CSS

* {
  margin: 0;
}

body {
  height: 3000px;
}

img {
  position: absolute;
  max-width: 250px;
  top: 150%;
  left: 50%;
  margin-left: -125px;
  margin-top: -125px;
  /* transition: all 0.5s ease; */
}

.lorem {
  color: #ccc;
  font-size: 18px;
  line-height: 34px;
  padding: 20px;
}

JavaScript

jQuery(document).ready(function($) {
  $(window).scroll(function(event) {
  	// get value of scroll top on scrolling
    var scroll = $(window).scrollTop();
    // set a rotation angle based on scroll top value --smaller is better so rotation will be smoother
    var rotateValue = scroll / 3;
    $('img').css({
    	// implement rotation value on image
    	transform: 'rotate('+ rotateValue + 'deg)'
    });
  });
});