sound

by Alexus fox

HTML

<div id="container">

  <div id="belt-1" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-2" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-3" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>
    <div id="belt-4" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-5" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-6" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>
   <div id="belt-7" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-8" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

 <!--<div id="belt-9" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>
     <div id="belt-10" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-11" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-12" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>
-->
</div>
<div class="playsound">hey</div>

CSS

html {height:100%}

#container {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background-color:teal;
}
.playsound {
  cursor: pointer;
}



.belt {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /*-webkit-animation: container 10s linear infinite;
  -moz-animation:    container 10s linear infinite;*/
}
@-webkit-keyframes container {
  0%    { left: 0; }
  100%  { left: -50%; }
}
@moz-keyframes container {
  0%    { left: 0; }
  100%  { left: -50%; }
}

.belt {
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  height: 100%;
  width:08%;
  background-color:teal;
  position: relative;
}

.top {
  height: 50%;
  background-color:grey;
}

.bottom {
  height: 50%;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
  left: 0;
}

.buckle {
  height: 60px;
  background-color:maroon;
    cursor: pointer;
}



#reset {
   float: left;
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  width: 50px;
  background-color: pink;
  position: relative;
}

JavaScript

$('.buckle').click(function() {
  $(this).parent().siblings('.top').animate({
    height: 0
  });
});

var clickSound = document.createElement("audio");
clickSound.src="http://kahimyang.info/resources/sound/click.mp3";
clickSound.autoPlay=false;
clickSound.preLoad=true;       

var Sound = document.createElement("audio");
Sound.src="http://www.w3schools.com/html/horse.mp3";
Sound.autoPlay=false;
Sound.preLoad=true;       

$(".buckle").click(function() {
    Sound.play();
});