Jukebox CD Spinner

In this example below you will see how to do a Jukebox CD Spinner with some HTML / CSS and Javascript

Press play and watch the CD spin up to full speed, rotate 100 times, and spin down again.

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Jukebox CD Spinner</title>
  
  
  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="player">
  <div class="disc"></div>
  <label>Currently Playing</label>
  <h2><i class="fa fa-music"></i> Yellow Submarine - The Beatles</h2>
  <div class="controls">
    <a href="#" class="play"><i class="fa fa-play"></i></a>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/jukebox-cd-spinner-jyCAJ */
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(36000deg);
  }
}
html {
  min-height: 100%;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
  padding: 20px 0;
  background-color: #DB5377;
  position: absolute;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DB5377), color-stop(1, #F2BD61));
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.8em;
}

div.player {
  margin: 0 auto;
  background: #eaeaea;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 2px 2px 0px #999;
  width: 300px;
  overflow: hidden;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
}
div.player div.disc {
  width: 300px;
  height: 300px;
  position: relative;
  box-shadow: 0px 0px 2px #888;
  margin: 0 0 20px 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-image: url(http://www.chrishutchinson.me/wp-content/uploads/2014/04/beatles.jpg);
  background-size: 300px 300px;
  z-index: 1;
  -webkit-animation: rotation 10s 1 ease-in-out;
  -webkit-animation-play-state: paused;
}
div.player div.disc:after {
  position: absolute;
  top: 118px;
  left: 118px;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.6);
  content: '';
  display: block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 2px solid #eaeaea;
  z-index: 2;
}
div.player div.disc:before {
  position: absolute;
  top: 143px;
  left: 143px;
  width: 14px;
  height: 14px;
  background: #000;
  content: '';
  display: block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  z-index: 3;
}
div.player label {
  font-size: 0.9em;
  text-transform: uppercase;
  color: #bababa;
}
div.player div.controls {
  padding: 10px 0;
}
div.player div.controls a {
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  font-size: 2.7em;
  background: #486d9a;
  color: #FFF;
  height: 80px;
  width: 80px;
  line-height: 80px;
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/jukebox-cd-spinner-jyCAJ */
$(document).ready(function(){
  // Process when the user clicks on the play button
  $('.play').click(function(e){
    e.preventDefault();
    if($('.player').hasClass('playing')){
      $(this).html('<i class="fa fa-play"></i>');
      $('.player .disc').css('-webkit-animation-play-state', 'paused');
    } else {
      $(this).html('<i class="fa fa-pause"></i>');
      $('.player .disc').css('-webkit-animation-play-state', 'running');
    }
    
    $('.player').toggleClass('playing');
  });
  
  // Look for the animation end event on the disc, so we can reset the play button
  $('.disc').bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
    resetPlayButton();
  });
  
  // Function to reset the play buttons
  // Clones the disc so that we can restart it
  function resetPlayButton() {
    $('.play').html('<i class="fa fa-play"></i>');
    var el = $('.player .disc');
    el.before( el.clone(true) ).remove();
    $('.player .disc').css('-webkit-animation-play-state', 'paused');
  }
});

Comments