[해피CGI][cgimall] 웨이브치는 뮤직 플레이어

웨이브치는 뮤직 플레이어입니다.
제이쿼리를 통해 플레이와 정지를 컨트롤 하고
웨이브는 transform을 통해 애니메이션을 주는 예제입니다.

 

 

HTML 구조

<div class='music-card playing'>

  

  <div class='image'></div>

  

  <div class='wave'></div>

  <div class='wave'></div>

  <div class='wave'></div>

  

  <div class='info'>

    <h2 class='title'>Anomaly</h2>

    <div class='artist'>Lecrae</div>

  </div>

  

  <i class="fa fa-pause trigger" aria-hidden="true"></i>

  <i class="fa fa-play trigger" aria-hidden="true"></i>

</div>

 

 

CSS 소스

@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';

 

body {

  background: #fff;

}

 

 

@keyframes wave {

  0%   { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

 

.music-card {

  margin: 100px auto;

  background: #fff;

  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);

  overflow: hidden;

  position: relative;

  width: 300px;

  height: 500px;

  border-radius: 6px;

}

 

.image {

  background: url('http://static1.squarespace.com/static/530b728de4b04fc9b23a5988/t/569880381a5203aa7d44c1a8/1452834873397/00.jpg?format=1000w') no-repeat 75%;

  background-size: cover;  

  position: absolute;

  z-index: 1;

  opacity: 0.3;

  height: 300px;

  width: 300px;

}

 

.image:after {

  height: 100px;

  content: '';

  top: 200px;

  position: absolute;

  width: 100%;

  z-index: 1;

  background: linear-gradient(rgba(9, 2, 4, 0), #444);

}

 

.wave {

  position: absolute;

  height: 750px;

  width: 750px;

  opacity: 0.6;

  left: 0;

  top: 0;

  margin-left: -70%;

  margin-top: -130%;

  background: radial-gradient(#353535, #383737);

}

 

.wave:nth-child(2),

.wave:nth-child(3) {

  top: 10px;

}

 

.playing .wave {

  border-radius: 40%;

  animation: wave 3000ms infinite linear;

}

/* when stop */

.wave {

  border-radius: 40%;

  animation: wave 55s infinite linear;

}

 

.playing .wave:nth-child(2) {

  animation-duration: 4000ms;

}

/* when stop */

.wave:nth-child(2) {

  animation-duration: 50s;

}

 

.playing .wave:nth-child(3) {

  animation-duration: 5000ms;

}

/* when stop */

.wave:nth-child(3) {

  animation-duration: 45s;

}

 

.info {

  position: absolute;

  bottom: 20px;

  left: 0;

  right: 0;

  text-align: center;

}

 

.title {

  font-size: 1.4em;

  font-weight: 400;

  color: #333;

  margin-bottom: 8px;

  text-transform: uppercase;

  font-family: 'Reem Kufi', sans-serif;

}

 

.artist {

  color: #cfcfcf;

  font-size: 1.2em;

  letter-spacing: 0.08em;

  font-family: 'Reem Kufi', sans-serif;

  margin-top: -10px;

}

 

.fa {

  position: absolute;

  bottom: 10px;

  right: 10px;

  font-size: 18px;

  cursor: pointer;

  color: #555;

}

 

.fa-play {

  display: none;

}

JS 소스

var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Lecrae_-_Anomaly_(Lyric_Video).mp3');

audio.volume = 0.1;

audio.autoplay = true;

 

$('.trigger').click(function() {

  if (audio.paused == false) {

      audio.pause();

      $('.fa-play').show();

      $('.fa-pause').hide();

      $('.music-card').removeClass('playing');

  } else {

      audio.play();

      $('.fa-pause').show();

      $('.fa-play').hide();

      $('.music-card').addClass('playing');

  }

});