Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. Lately, I came across some news about a new "Hero" game: DJ Hero. Since I really love Proof of Concepts/experimenting, I wanted to bring the vinyl to the browser. That's why I present to you: jQuery DJ Hero.

By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound).

Since we're using CSS3's transform property (to rotate the vinyls), this example only works in browsers that support CSS3 (Currently, the latest versions of Safari, Firefox and Chrome support this). I've added a video for those people that don't use those browsers and still want to see how the effect looks like. Make sure to check out the demo and let's see how you can create that yourself.

Example video

Below is a small video showing the effect inside Safari 4.0 where it's fully functional.

Now let's see how we can create something like that ourselves!

HTML

This is the HTML we're going to work with. As you can see, nothing really special going on here. Just a play button, two vinyls and two needles, each with the buttons to make the records spin faster/slower.

I know this isn't the most fascinating part, but we'll need it as our backbone for out page. On with the CSS!

CSS

Just like the HTML, the CSS of this page isn't very spectecular. It simply places some divisions and adds the vinyl background images (the vinyls themselves). The needles are placed on a absolute position in order to make them visible on top of the vinyls.

Scratching

// Handle the "mouseDown" to enable scratching// We can't combine "mouseDown" with "mouseMove", so we'll need// to set a boolean (mousedown).// We're also clearing the intervals to prevent spinning
$(".vinyl").mousedown(function(e){var intervalHandle = $(this).data('intervalHandle');
clearInterval(intervalHandle);
mousedown = true;
}).mouseup(function(){
mousedown = false;
if(playing){
startSpinning($(this));
}});
// When mousedown is true and the records are playing,// we can scratch the vinyls. This is where the code can be improved,// since we only register X-movement
$(".vinyl").mousemove(function(e){if(mousedown && playing){var intervalHandle = $(this).data('intervalHandle');
clearInterval(intervalHandle);
$(this).rotate(e.pageX % 360);
}});

I know there are a couple of bugs in this script, but I think the outcome is pretty sweet. There is loads of room for improvement, so feel free to download the source and mess around with the code yourself!

What do you think of this wicked Proof of Concept? Would you improve the script, or do you like it the way it is? Feel free to share.

This (we)blog brings you information about (web)design, blogging tips, (programming) tutorials and much, much more. I can't describe Marcofolio.net in words: Just look around and be amazed. Many (new) visitors have a habit to stick around, just because of the variety of articles.

Have fun reading this blog and don't forget to subscribe to the feed to keep updated on the latest articles.