Jarques Pretorius

Resume

Make everything spin.

Spunday [spinning script]

For those who don't know, Spunday is a very unofficial day to (celebrate?) being able to spin stuff on your site. The creator, Elliott Kember, released an easy to use script to attach spinning to any element on your page.

The only problem, is that the user can't stop it at all. So in order to allow your visitors to stop the script, I edited his original to show a popup allowing a stop button.

The Script

$.fn.spin = function(speed_word){

	moz = $(this).css('-moz-transform');
	webkit = $(this).css('webkit-transform');
	already_rotating = ((moz != 'none' && webkit == '') || (moz == '' && webkit != 'none'))
	var number = 0;
	var speed = 0;
	if (already_rotating){
		return false;
	} else  if (speed_word == 'silly-fast'){
		speed = 3;
	} else if (speed_word == 'fast'){
		speed = 0.3;
	} else if (speed_word == 'slow'){
		speed = 0.1;
	} else if (typeof(speed_word) == 'number'){
		speed = speed_word / 10;
	}
	var self = this;

	$theObject = jQuery(self);

	$("body").append("
Why are things spinning? | Make it stop! :(
");
	setTimeout("$('.spunday_info').fadeIn(1000)", 1000);

$anim = setInterval(function(){
	number += speed;
	$($theObject).css('webkit-transform', 'rotate(-'+number+'deg)');
	$($theObject).css('-moz-transform', 'rotate(-'+number+'deg)');
  	}, 50)
}

function makeItStop() {
	clearInterval($anim);
	$($theObject).css('webkit-transform', 'rotate(-0deg)');
	$($theObject).css('-moz-transform', 'rotate(-0deg)');
	$('.spunday_info').fadeOut(1000)
}
				

You can grab the updated script right here.

Using the Spin

$(element).spin('slow');

The Message

Here is what the message looks like:

Demo

Want to see it in action? Click here to make something spin.