JSFiddle - React, Tailwind, and code Playground

by Mikeymore

HTML

<div id="canvas_container">
	<div id="tandwiel-1">&nbsp;</div>
	<div id="tandwiel-2">&nbsp;</div>
	<div id="tandwiel-3">&nbsp;</div>
	<div id="tandwiel-4">&nbsp;</div>
	<div id="tandwiel-5">&nbsp;</div>
	<div id="webdesign">
		<h2 class="webdesign"><a href="webdesign">Webdesign</a>
		</h2>
		<p class="webdesign">Lorem ipsum dolar set amet.</p>
	</div>
	<div id="reclamecampagnes">
		<h2 class="reclamecampagnes"><a href="reclamecampagnes">Reclamecampagnes</a>
		</h2>
		<p class="reclamecampagnes">Lorem ipsum dolar set amet.</p>
	</div>
	<div id="grafische-vormgeving">
		<h2 class="grafische-vormgeving"><a href="grafische-vormgeving">Grafische vormgeving</a>
		</h2>
		<p class="grafische-vormgeving">Lorem ipsum dolar set amet.</p>
	</div>
	<div id="seo">
		<h2 class="seo"><a href="zoekmachine-optimalisatie">Zoekmachine Optimalisatie</a>
		</h2>
		<p class="seo">Lorem ipsum dolar set amet.</p>
	</div>
	<div id="multimedia">
		<h2 class="multimedia"><a href="multimedia">Multimedia</a>
		</h2>
		<p class="multimedia">Lorem ipsum dolar set amet.</p>
	</div>
</div>

CSS

#canvas_container {
	width: 1050px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	background-color:#FFF;
	font-family: Verdana, Geneva, sans-serif;
} 
			#tandwiel-1 {
				position: absolute;
				top: 0px;
				left: 267px;
			}
			#tandwiel-2 {
				position: absolute;
				top: 40px;
				left: 484px;
			}
			#tandwiel-3 {
				position: absolute;
				top: 260px;
				left: 479px;
			}
			#tandwiel-4 {
				position: absolute;
				top: 292px;
				left: 701px;
			}
			#tandwiel-5 {
				position: absolute;
				top: 470px;
				left: 407px;
			}
#webdesign {
	width: 225px;
	position: absolute;
	top: 35px;
	left: 15px;
	color: #adacac;
}	
#reclamecampagnes {
	width: 225px;
	position: absolute;
	top: 60px;
	left: 740px;
	color: #f99400;
}	
#grafische-vormgeving {
	width: 225px;
	position: absolute;
	top: 290px;
	left: 225px;
	color: #475787;
}	
#seo {
	width: 225px;
	position: absolute;
	top: 565px;
	left: 775px;
	color: #706f6f;
}
#multimedia {
	width: 225px;
	position: absolute;
	top: 520px;
	left: 165px;
	color: #3a3a3a;
}
#webdesign h2 a, #reclamecampagnes h2 a, #grafische-vormgeving h2 a, #multimedia h2 a, #seo h2 a {
	font-size: 16px;
	font-weight: bold;
	padding:12px 0 0 65px !important;
	margin: 0 !important;
}
#reclamecampagnes h2 a {
	font-size: 16px;
	font-weight: bold;
	padding:12px 0 0 40px !important;
}
#webdesign h2 a {
	color: #adacac !important;
	width: 155px;
	height: 32px;
	display: block;
	cursor: pointer;
	
}
#reclamecampagnes h2 a {	
	color: #f99400 !important;
	width: 155px;
	height: 32px;
	display: block;
	cursor: pointer;
}
#grafische-vormgeving h2 a {
	color: #475787 !important;

	width: 155px;
	height: 32px;
	display: block;
	cursor: pointer;
}
#multimedia h2 a {
	color: #3a3a3a !important;
	width: 155px;
	height: 32px;
	display: block;
	cursor: pointer;
}
#seo h2 a {
	color: #706f6f !important;
	width: 155px;
	height: 32px;
	display: block;
	cursor: pointer;
}
#webdesign p, #reclamecampagnes p, #grafische-vormgeving p,...

JavaScript

var w = window.innerWidth;

if (w>=960) {window.direction = -1; }
else {window.direction = 1; }


window.onresize=function(){
var w = window.innerWidth;
if (w>=960) {window.direction = -1; var angle=0; }
else {window.direction = 1; var angle=0; }
	console.log(window.direction);
};



window.onload = function() {  
var paper = new Raphael(document.getElementById('canvas_container'), 730, 750); 


var paper = new Raphael(document.getElementById('tandwiel-1'), 240, 240);
var tandwiel1 = paper.image( "tandwiel-1.png",0,0,240,240); 

var paper = new Raphael(document.getElementById('tandwiel-2'), 240, 240);
var tandwiel2 = paper.image( "tandwiel-2.png",0,0,240,240);

var paper = new Raphael(document.getElementById('tandwiel-3'), 240, 240);
var tandwiel3 = paper.image( "tandwiel-3.png",0,0,240,240);

var paper = new Raphael(document.getElementById('tandwiel-4'), 240, 240);
var tandwiel4 = paper.image( "tandwiel-4.png",0,0,240,240);

var paper = new Raphael(document.getElementById('tandwiel-5'), 240, 240);
var tandwiel5 = paper.image( "tandwiel-5.png",0,0,240,240);

var angle = 0;


setInterval( function() {
    angle += 2;        
    tandwiel1.stop().animate( { "transform": "R" + angle }, 1000, "<>" );
}, 150 );

setInterval( function() { 
   angle += 2;
   tandwiel2.stop().animate( { "transform": "R" + direction*angle }, 1000, "<>" );
}, 150 );

setInterval( function() {
   angle += 2;        
    tandwiel3.stop().animate( { "transform": "R" + angle }, 1000, "<>" );
}, 150 );

setInterval( function() {
   angle += 2;        
    tandwiel4.stop().animate( { "transform": "R" + -angle }, 1000, "<>" );
}, 150 );

setInterval( function() {
   angle += 2;        
    tandwiel5.stop().animate( { "transform": "R" + -angle }, 1000, "<>" );
}, 150 );
}