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).

To achieve the desired effect, I made use of jQuery, Animate CSS Rotation and Scale jQuery Patch and the jQuery Easing library. The picture of the vinyl has been taken from stock.xchng.

  

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.

 
<div id="content">
   <div class="center">
      <p id="playbutton"><img src="images/btn-play.png" alt="Play" id="playbtn" /></p>
   </div>
   <div id="dj">
      <div class="needle" id="needle1"></div>
      <div class="vinyl" id="vinyl1"></div>
      <div class="needle" id="needle2"></div>
      <div class="vinyl" id="vinyl2"></div>
      <div id="buttons">
         <div id="leftbtns">
            <div id="slowbutton1"><img src="images/btn-slow.png" alt="Slow" /></div>
            <div id="speedbutton1"><img src="images/btn-fast.png" alt="Fast" /></div>
         </div>
         <div id="rightbtns">
            <div id="slowbutton2"><img src="images/btn-slow.png" alt="Slow" /></div>   
            <div id="speedbutton2"><img src="images/btn-fast.png" alt="Fast" /></div>
         </div>
      </div>
   </div>
</div>

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.

 
#dj { width:760px; margin:0 auto; }
.center { margin:0 auto; width:128px; }
#playbutton { text-align:center; cursor:pointer; width:128px; }
 
.vinyl { width:370px; height:370px; float:left; margin:0 5px; }
#vinyl1 { background-image:url("../images/vinyl1.png"); }
#vinyl2 { background-image:url("../images/vinyl2.png"); }
 
.needle { width:50px; height:76px; position:absolute; background-image:url("../images/needle.png"); z-index:99; }
#needle1 { margin-left:300px; }
#needle2 { margin-left:680px; }
 
#buttons { z-index:9999; clear:both; }
#buttons img { cursor:pointer; }
#buttons div { float:left; margin-top:25px; }
#leftbtns { margin-left:60px; }
#rightbtns { margin-left:120px; }

Now that we have our HTML and CSS ready, we can finally continue to our most exciting part: animating and adding functionality with jQuery.

jQuery

Before we can use our jQuery script, we'll need to include the script files to our HTML. These are the jQuery libraries that we're going to use (placed in the head section of the HTML):

 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

1. First, we'll load the JavaScript API from Google.
2. The second one is our own script, that'll load jQuery and have our functionality we need.
3. After that, we'll use the Animate CSS Rotation and Scale jQuery Patch.
4. The next script is needed by the previous one.
5. Finally, we load the jQuery Easing library for smoother animations.

After we've done the HTML part, we can move on with the actual JavaScript. I've added comments in the code to explain some stuff.

Global variables

 
// Variable to store if the records are spinning
var playing = false;
  
// Variable to store if the mouse is down (to enable scratching)
var mousedown = false;

Playbutton

 
// Function to be called when the play button is clicked.
// It changes from "play" to "pause" when records are spinning
// and starts both the vinyls.
$("#playbutton").click(function() {
   checkButtons();
   if(playing) {
      // Pause
      $("#playbtn").attr("src", "images/btn-play.png");
      playing = false;
      $(".vinyl").each(function() {
         // Clear the interval from the vinyl
         // to stop spinning
         var intervalHandle = $(this).data('intervalHandle');
         clearInterval(intervalHandle);
         $(this)
            .css({ 'cursor' : 'default' })
            .stop()
            .animate({rotate: '+=40deg'}, 800, 'easeOutCubic');            
      });
   } else {
      // Play
      $("#playbtn").attr("src", "images/btn-pause.png");
      playing = true;
      $(".vinyl").each(function() {
         $(this)
            .css({ 'cursor' : 'move' })
            .data('rotationAngle', 10);
         startSpinning($(this));
      });
   }
});

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);
   }
});

Speed control buttons

 
// Handlers for each speed button (slow or faster)
$("#speedbutton1").click(function() {
   if($(this).data('isEnabled')) {
      $("#vinyl1").data('rotationAngle', $("#vinyl1").data('rotationAngle') + 10);
   }
   checkButtons();
});
 
$("#slowbutton1").click(function() {
   if($(this).data('isEnabled')) {
      $("#vinyl1").data('rotationAngle', $("#vinyl1").data('rotationAngle') - 10);
   }
   checkButtons();
});
 
// Speedbutton2 and Slowbutton2 are removed in this tutorial

Button check

 
/**
* Check if the buttons needs to be changed
**/
function checkButtons() {
   if($("#vinyl1").data('rotationAngle') == 0) {
      $("#slowbutton1")
         .data('isEnabled', false)
         .children().attr("src", "images/btn-slow-dis.png");
   } else {
      $("#slowbutton1")
         .data('isEnabled', true)
         .children().attr("src", "images/btn-slow.png");
   }
      
   if($("#vinyl1").data('rotationAngle') == 50) {
      $("#speedbutton1")
         .data('isEnabled', false)
         .children().attr("src", "images/btn-fast-dis.png");
   } else {
      $("#speedbutton1")
         .data('isEnabled', true)
         .children().attr("src", "images/btn-fast.png");
   }
   // Vinyl2 is removed in this tutorial
}

Spinning records

 
/**
* Start spinning those vinyls by the given element. Set an interval to keep the vinyl spinning
* and attach it to the element to keep a reference for clearing later.
**/
function startSpinning(element) {
   element.stop().animate({rotate: '+=40deg'}, 800, 'easeInCubic', function() {
      var intervalHandle = setInterval(
          function () {
              element.animate({rotate: '+=' + element.data('rotationAngle') + 'deg'}, 0);
          },
          25
      );
      element.data('intervalHandle', intervalHandle);
   });
}

Conclusion and Download

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.

Interested in this topic? You might enjoy another article I've written called

• jQuery Mobile First Look: Book review and Giveaway
• Experimenting with the element() CSS function
• jQuery quickie: Unlimited Scroll using the Twitter API
• jHTML-Ipsum: HTML Ipsum using a jQuery plugin
• Nostalgia: Dragging the Windows XP error dialog

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: