Spunday, by @elliottkember

The other day I wrote a tiny bit of Javascript
which made my whole website rotate in compatible browsers.
This Sunday, you can do the same...
and celebrate Spunday!
Make something spin on your website...
I dare you. I double dare you!
Credit to @thefella for the original idea.

How do I do it?

Once you've installed jQuery,
Use this code:

$.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;

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

(available for download here) and then go

  $('object').spin('fast');
        

and it'll spin!
Or, you can go like this:

<button onclick="$(this).spin('silly-fast')">Spin me!</button><br>
<button onclick="$('pre').spin('fast')">Spin the code!</button><br>
<button onclick="$('#spin').spin('slow')">Spin the page!</button>
        

Spin me!
Spin the code!
Spin the page!

On that note, why would I do this?

I have no answer for you.
If you don't want to do it, here is a bookmarklet which will do this to any site.
Drag it to your bookmarks bar.

Unfortunately

This only works in browsers which support CSS3 transformations.
That includes Chrome, Safari, and Firefox 3.5
Otherwise, this won't be very interesting for you at all.
Webkit has some issues spinning non-block elements.

Who's doing it?

Add your site in the comments if you're in!

Comments