css 애니메이션(animation)으로 CD플레이어 회전시키기 (10) [END]

#css애니메이션 #css회전

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

학습목표

1. css 애니메이션을 활용하여 재생시 음악 CD를 돌려보자.

​

사용하는 언어

CSS

• 애니매이션을 활용하여 CD패널을 돌리자

​

Js

• classList를 활용하여 재생 아이콘을 누를때 음악 패널에 (article) class ="on"을 부여하자

CSS

1.제자리 회전하는 애니메이션 만들기

​

먼저 제자리 애니메이션을 구현하자.

                                    @keyframes rotation1{
 0% {transform:rotate(0deg);}
 100% {transform: rotate(360deg);}
}

@keyframes rotation2{
 0% {transform: translateY(10%) transform:rotate(0deg);}
 100% {transform: translateY(10%) transform: rotate(360deg);}
}

css에서는 @keyframes를 활용하여 애니메이션을 간단하게 구현가능하다.

​

사용방법은

@keyframes 이름(사용자설정) {

0%{동작코드, 주로 rotate, translate가 활용됨}

~

100% {동작코드, 주로 rotate, translate가 활용됨}

}

​

0% 시작, 100%는 끝을 의미하며, 중간사이의 동작이 필요하면 넣어주면 된다 ex)25% ,50%,75%,17% ..

​

2.pic class="on"이되는 CD를 회전시키기

만들어놓은 @ketframes animation1, animation2를 이제 적용할 차례이다.

앞선 강의에서 음악패널 사진은 pic이라는 요소 before과 after에 넣었다. class가 "on"이되는 pic의 before, after요소에 애니메이션을 넣자.

                                    .pic{

  &.on{
    &::before{
       animation: rotation2 4s linear infinite;
    }
    &::after{
      animation: rotation1 4s linear infinite;
   }

}
}

animation: @keyframes 임의지정 이름 , 지연시간, 선형/비선형 지정, 반복 ; 순으로 작성해주면 된다.

JS

1.classList를 활용하여 class 추가/제거시키기

이제 pic에 클래스 on을 추가로 넣어주기만 하면 회전이 잘 작동될 것이다.

​

재생아이콘 클릭시 class on을 추가, 정지,리로드 아이콘 클릭시 class on을 제거하는 코드를 짜보겠다.

                                    for(let el of list){
  const play= el.querySelector('.play');
  const paues= el.querySelector('.pause');
  const load= el.querySelector('.load');

  play.addEventListener('click', e=>{
    e.currentTarget.closest('article').querySelector('.pic').classList.add('on');
  })

    pause.addEventListener('click', e=>{
    e.currentTarget.closest('article').querySelector('.pic').classList.remove('on');
  })

    load.addEventListener('click', e=>{
    e.currentTarget.closest('article').querySelector('.pic').classList.remove('on');
  })
}

바로 이전글 패널에 오디오넣기 에서 사용된 for of 반복문에 넣어주면 된다.

classList는 이전글에 다뤘기에 생략하겠다.

학습결과

짚어갈 포인트

• css animation 사용하는 방법 : @keyframes 구조와 animation 속성값
• classList add/remove 복습

#

• 재생 아이콘 클릭시 on이 적용되어 애니매이션이 작동되는 것을 볼 수 있다.
• 정지/리로드 아이콘 클릭시 on이 제거되어 멈추는 것을 볼 수 있다.

**\*rotattion2에 tranlateY(10%)를 넣는이유**

디자인적인 이유다. translateY를 넣지않으면 은은한 빛이 제자리에 비추기 때문이다. (원래 before요소가 내려간게 적용이 안됨)

​

#

#

translateY적용 x (좌), translateY적용 o(우)

템플릿 글 완료소감

저번달 부터 작성을 시작했던 템플릿 연습글이 이제 끝났다. 나 스스로 복습하기 위해 최대한 자세하게 설명을 적었다. 약간 주관적인 공부 노트라 남들이 읽었을 때는 이해가 안되는 부분이 많을거라 생각이든다. 모르는게 있으면 댓글로 가르쳐줄 수 있다.!

​

글 하나를 끝내닌깐 너무나 후련하다. 이제 다음단계로 넘어갈 수 있을 것 같다. 다음글은 SVG를 활용한 동적인 UI를 구현하는 연습이다. 역시 최성일 강사님의 강의를 정리할 것이며, 이번에는 2주내로 단기간에 완성시켜 보겠다..! 화이팅!