JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js&quot;"></script>
<body>
  <div id="cog"></div>
  <div id="cog1">asdsd</div>
  <div id="cog2"><img src="http://www.freeiconspng.com/uploads/gear-11-icon--free-icons-4.png" id="image1" style="height:50px;"></div>
  <div id="cog3"><img src="http://www.freeiconspng.com/uploads/gear-11-icon--free-icons-4.png" id="image1" style="height:50px;"></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-image: url("http://www.freeiconspng.com/uploads/gear-11-icon--free-icons-4.png");
  background: #00f;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  position: fixed;
  top: 60px;
  left: 20px;
}
#cog2 {
  border-radius: 10px;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 110px;
  left: 20px;
}
#cog3 {
  border-radius: 10px;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 110px;
  left: 60px;
  /* Firefox */
	-moz-transform: scale(1) rotate(30deg) translate(0px);
	/* WebKit */
	-webkit-transform: scale(1) rotate(30deg) translate(0px);
	/* Opera */
	-o-transform: scale(1) rotate(30deg) translate(0px);
	/* Standard */
	transform: scale(1) rotate(30deg) translate(0px);
}

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)'
  });
  $('#cog2').css({
    'transform': 'rotate(' + -1 * ($body.scrollTop() / bodyHeight * 360) + 'deg)'
  });
  $('#cog3').css({
    'transform': 'rotate(' + -1 * ($body.scrollTop() / bodyHeight * 360) + 'deg)'
  });

});