Midi Piano

index.html

<div class="piano">
  <div class="tecla-1">1</div>
  <div class="tecla-2">2</div>
  <div class="tecla-3">3</div>
  <div class="tecla-4">4</div>
  <div class="tecla-5">5</div>
</div>

<div class="global">

  <div class="rail rail-1"></div>
  <div class="rail rail-2"></div>
  <div class="rail rail-3"></div>
  <div class="rail rail-4"></div>
  <div class="rail rail-5"></div>

</div>

Midi Piano.markdown

Midi Piano

A Pen by DanHanfry on CodePen.

License.

script.js

var height = 500

var midi = {
	duracionTotal: 1500,
	data: [
		{ duration: 125, nota: 1, startTime: 0 },
		{ duration: 125, nota: 2, startTime: 200 },
	  { duration: 125, nota: 3, startTime: 400 },
		{ duration: 125, nota: 4, startTime: 600 },
    { duration: 125, nota: 1, startTime: 800 },
    { duration: 125, nota: 2, startTime: 1000 },
    { duration: 125, nota: 3, startTime: 1200 },
  ]
	
}

midi.data.map( function(item, i){
  
  var calcTop = Number(item.startTime * height) / midi.duracionTotal
  var calcSize = Number(item.duration * height) / midi.duracionTotal

  var className = ".rail-" + item.nota
  var style = "top:"+calcTop+"px; height:"+calcSize+"px;"
  var html = "<div class='nota nota-" + item.nota + "' style='"+style+"'></div>"
  
  $(className).append(html);
  
 
})

var div1 = $('.tecla-1')
var div2 = $('.nota-2')
console.log( collision(div1, div2) )

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}


var aboutAnimation = new TimelineMax({
  repeat: -1
})

aboutAnimation
.to('.global', midi.duracionTotal / 1000, {
  y:-height,
  ease: Linear.easeNone
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/TweenMax.min.js"></script>

style.css

*{
  margin: 0;
  padding: 0;
}

.piano {
    background-color: #BDE2EE;
    width: 500px;
    height: 60px;
  display: flex;
}

.piano div {
    background-color: #63DD81;
    width: 100px;
    height: 60px;
    border: solid 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}

.global {
    background-color: #00FFDE;
    width: 500px;
    height: 500px;
    display: flex;
    z-index: -1;
    position: absolute;
}

.rail {
    background-color: #CDBEC4;
    width: 100px;
    height: 100%;
    position: relative;
    border: solid 1px;
}

.nota {
    background-color: #7878B4;
    width: 100px;
    height: 50px;
    position: absolute;
}