The script is for rotating 5 different coloured gears (tandwiel) on my site.
I think the code can be improved and improved performance. 5x var paper isn't that smart for speed?
Getting the current code working faster in the normal state is the primary concern, but there are two smaller issues I know of that I would appreciate help with:
- The code works most of the time, but when changing the browser size I have a problem with the rotating left and right: 1 gear will rotate the other direction, but starts to rotate very fast and finally slows down to normal speed. The longer you let it rotate at normal speed and then change browser, the longer the gear rotates too fast. It seems to me it rotates backwards all the missing angles til it will be normal again??
- How to stop the JavaScript when the browser size is mobile. So it won't overload for mobile. The animation should start again when changing to bigger browser size.
Those two issues are not the primary concern.
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; }
else if (w<960 && w>=715){window.direction = 1; }
};
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" + -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" + direction*angle }, 1000, "<>" );
}, 150 );
}