Placed in: Home 
Programming Webdesign jQuery DJ Hero - CSS3 and jQuery fun
Programming Webdesign jQuery DJ Hero - CSS3 and jQuery fun Cialis Online
| jQuery DJ Hero - CSS3 and jQuery fun |
|
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 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 #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 <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>
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. Tags: dj jquery css3 proof of concept experiment webdevelopment Interested in this topic? You might enjoy another article I've written called
Did you like this article? Subscribe to my feed or email to keep updated on new articles. Spread the word and submit to:    
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
.
,
!
| < Prev | Next > |
|---|
| Subscribe | ||
|---|---|---|
|
| Search |
|---|
| Or try the sitemap |
Friends of Marcofolio.net
2007 - 2012 Marcofolio.net
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.