<div id="player">
  <div class="scrollDown">
    <div class="content">
    <span class="fa fa-angle-up"></span> 
    <h3>Running</h3>
    <ul>
    <li class="header">
      <span>#</span>
      <span>title</span>
      <span class="fa fa-clock-o"></span>
    </li>
    <li>
      <span class="fa fa-signal"></span>
      <span>Omen</span> 
      <span>3:17</span> </span>
      </li>
    <li>
      <span>2</span>
      <span>When a Fire Starts To Burn</span> 
      <span>4:44</span></li>
    <li>
      <span>3</span>
      <span>Latch</span> 
      <span>4:16</span> </li>
    <li>
      <span>4</span>
      <span>You & Me (Flume Remix)</span> 
      <span>4:43</span> </li>
    <li>
      <span>5</span>
      <span>Grab Her!</span> 
    <span>5:13</span> </li>
    <li>
      <span>6</span>
      <span>Stimulation</span> 
    <span>5:20</span> </li>
    </ul>
  </div>
  </div>
  <div class="top">
  <span class="fa fa-angle-down floating"></span>
  <div class="cover"></div>
    <div class="container">
    <p>Disclosure<br>Omen</p>
    <h3>Omen <span class="iconicfill-pause"></span></h3>
    </div>
    <div class="timing"><span class="left">1:12</span><span class="right">3:17</span>
    </div>
  <div class="progress"></div>
  </div>
  <div class="bottom">
      <i class="icon ion-md-repeat"></i>
  <i class="icon ion-md-heart"></i>
  <i class="icon ion-md-shuffle"></i>
  </div>
</div>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://unpkg.com/ionicons@4.1.1/dist/css/ionicons.min.css);

[class*="iconicfill-"]:before {
  font-family: 'IconicFill', sans-serif;
  font-size:2rem;
  position:relative;
  top:-0.3rem;
}

.left{
  float:left;
}

.right{
  float:right;
}

.fa.fa-angle-up,
.fa.fa-angle-down{
  cursor:pointer;
}

$pink:rgb(153,192,150);
$backgroundAlpha:0.85;
$lightGrey:rgba(#999,0.45);
$infoGrey:rgba(white,0.35);

body,
html{
  padding:0;
  margin:0;
}

body{
  background:linear-gradient(to bottom,rgba($pink,$backgroundAlpha),rgba($pink,$backgroundAlpha)),url(http://www.disclosureshop.com/img/logo.png);
  background-size:100%;
  background-position: 0% 0%;
  background-repeat:no-repeat;
  min-height:100vh;
}

#player{
  overflow:hidden;
  border-radius:5px;
  transform:scale(0.5,0.5);
  position:absolute;
  height:500px;
  width:350px;
  background:rgba(0,0,0,1);
  top: calc(50% - 250px);
  left: calc(50% - 175px);
  box-shadow: 5px 10px 10px rgba(0,0,0,0.4);
  .scrollDown{
    position:absolute;
    height:130%;
    width:100%;
    background:rgba(0,0,0,.85);
    top:-140%;
    z-index:2;
    .content{
      position:absolute;
      bottom:0;
      height:77%;
      width:100%;
      padding:10px 17px;
      box-sizing:border-box;
      color:$pink;
      .header{
        font-size:1.5rem;
        margin-bottom:20px;
      }
      
      span {
        display:inline-block;
        font-weight:300;
        &:first-child{
          min-width:20px;
        }
        &:nth-child(2){
          min-width:230px;
          max-width:200px;
          padding-left:15px;
          box-sizing:border-box;
          font-weight:400;
        }
      }
      h3{
        font-family:"Montserrat",sans-serif;
        margin-top:40px;
        padding-left:15px;
        font-size:2.6rem;
        margin-bottom:40px;
      }
      ul{
        list-style:none;
        padding-left:20px;
        li{
          font-family:"Lato",sans-serif;
          font-size:.843rem;
          margin-bottom:15px;
          margin-left:0;
          color:rgba(white,0.8);
        }
      }
      span.fa-angle-up{
        min-width:10px;
        font-size:2rem;
        float:right;
      }
    }
  }
  .top{
    position:relative;
    .floating{
      position:absolute;
      font-size:2rem;
      right:5%;
      top:10px;
    }
    color:white;
    .container{
      font-family: 'Montserrat', sans-serif;
      margin-top:-100px;
      padding:0 10%;
      p{
        font-family: 'Lato', sans-serif;
        font-weight:300;
        color:$infoGrey;
        font-size:.9rem;
      }
      h3{
        font-size:3rem;
        margin:-19px 0 10px;
        .iconicfill-pause{
          float:right;
          color:$pink;
          position:relative;
          top:2px;
          &:before{
            font-size:1.5rem;
          }
        }
      }
    }
    .cover{
      width:100%;
      padding:50% 0;  background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,1)),url(https://upload.wikimedia.org/wikipedia/en/5/50/Omen_%28Disclosure%29_cover_art.jpg);
      background-size:contain;
    }
    .timing{
      margin-bottom:15px;
      margin-top:40px;
      padding:0 10% 20px;
      font-family:"Montserrat",sans-serif;
      font-size:.9rem;
      color:rgba(white,0.9);
      span:before,
      span:after{
        clear:both;
      }
      span:last-child{
        color:$lightGrey;
      }
    }
    .progress{
      width:80%;
      height:1px;
      background:$lightGrey;
      margin:0 auto;
      position:relative;
      &:before{
        background:$pink;
        width:35%;
        height:100%;
        content:"";
        display:block;
        transition:all .5s;
      }
    }
  }
  .bottom{
    position:absolute;
    z-index:1;
    bottom:0;
    width:100%;
    box-sizing:border-box;
    font-size:1.7rem;
    height:50px;
    i{
      transition:all .5s;
      color:rgba(#999,0.5);
      position:absolute;
      &:first-child{
        left:10%;
      }
      &:nth-child(2){
        left:50%;
        transform: translatex(-50%);
        color:rgba($pink,1);
      }
      &:last-child{
        right:10%;
      }
     &:hover{
      color:rgba(#999,0.8);
      }
    }
  }
}
View Compiled
/*Click on the down arrow to see some phisical-based animation :D*/

const transform = (el, what) => {
  el.style.mozTransform =
  el.style.msTransform =
  el.style.webkitTransform =
  el.style.transform = what;
}

const player = document.querySelector('#player');

const caretUp = document.querySelector('.fa-angle-up');
const caretDown = document.querySelector('.fa-angle-down');
const divDown = document.querySelector('.scrollDown');

const spring = new rebound.SpringSystem();

let animation = spring.createSpring(60, 5);

let scrollDown = spring.createSpring(70, 7);

const expand = (el, val) => {
  transform(el, `scale(${val},${val})`);
}

const down = (el, val) => {
  el.style.top = `-${val}%`;
}

animation.addListener({
  onSpringUpdate(spring) {
    let current = spring.getCurrentValue();
    let val = rebound.MathUtil.mapValueInRange(current, 0, 1, 0.5, 1);
    expand(player, val);
  }
})

scrollDown.addListener({
  onSpringUpdate(spring) {
    let current = spring.getCurrentValue();
    let val = rebound.MathUtil.mapValueInRange(current, 0, 1, 140, 30);
    down(divDown, val);
  }
})

caretDown.addEventListener('click',()=>{
  scrollDown.setEndValue(1);
})

caretUp.addEventListener('click',()=>{
  scrollDown.setEndValue(0);
})

document.addEventListener('DOMContentLoaded', () => {
  animation.setEndValue(1);
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://facebook.github.io/rebound-js/rebound.js