HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄)

---

1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현

바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄)

---

미리보기

이번 포스팅을 잘 따라 오시면 다음과 같은 애니메이션을 구현하실 수 있게 됩니다. 
 

 
 

HTML

<div class="card" style="--c:15; --r:5"></div>
<div class="card" style="--c:15; --r:15"></div>
<div class="card" style="--c:15; --r:25"></div>
<div class="card" style="--c:15; --r:35"></div>

 
HTML 마크업 구조에서 제일 중요한 부분은 style 속성의 값으로 --c와 --r 이라는 사용자 정의 CSS 변수를 지정하는 것입니다. 또한 각 div 태그 마다 .card 라는 class 속성의 값을 지정하여 향후 CSS 에서 .card 클래스 선택자에 접근하기 쉽도록 해줍니다. 
 
그 외에는 설명할 것이 없기 때문에 바로 메인 작업인 CSS 로 넘어 가봅시다.
 

CSS

CSS Reset 을 통해 거슬리는 여백 제거하기

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 
우선 * 이라는 전체 선택자의 프로퍼티로 margin:0, padding:0, box-sizing:border-box 를 지정해줍니다. margin 은 박스모델에서 제일 바깥 여백을 의미하며, padding은 margin 안 쪽의 여백을 의미합니다. 
 
여기서 box-sizing 은 박스모델에서 콘텐츠 박스가 차지하는 넓이와 높이를 계산할 때 padding 이나 margin 과 같은 여백을 포함할지 안 할지는 결정하는 프로퍼티로 border-box 를 지정하게 되면 padding 과 margin 으로 지정한 여백 모두를 콘텐츠 박스의 높이와 넓이를 지정할 때 포함하도록 설정하게 됩니다.
 

body 태그를 컨테이너 요소로 보고 .card 중앙 정렬 시키기

body {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: #1e306a;
  display: flex;
  justify-content: center;
  align-items: center;
}

 
그 다음에는 body 태그를 .card 클래스가 부여된 div 박스의 컨테이너 요소(즉, 부모 요소)로 보고, 각 .card 요소들을 중앙정렬 시키기 위해 display:flex , jsutify-content:center, align-items: center 를 지정해줍니다. 
 
또한 전체 뷰포트를 body 태그로 가득 채우기 위해 width 를 100% 로 height 를 100vh 로 지정하여 각각 뷰포트의 100%에 일치하도록 설정해줍니다.이렇게 해주어야 .card 가 부여된 자식 요소들이 body 태그의 중앙에 정렬할 수 있습니다.
 
background 속성의 경우에는 16진수 표기법을 사용하여 배경색을 지정하였는데, 이는 개인의 취향에 맞게 색을 선택해주시면 됩니다.
 
마지막으로 overflow 를 hidden 으로 지정하여 부모 요소의 바깥으로 자식요소가 벗어나는 경우 가로와 세로로 스크롤바가 생기지 않도록 설정해줍니다.
 

.card 가 부여된 div 태그 꾸미기

.card {
  border-radius: 5px;
  background: linear-gradient(180deg, #fff4, transparent);
  transition: 1s;
  width: 175px;
  height: 200px;
  margin: 0 -45px;
  transform: translateY(calc(var(--r) * -2px)) rotate(calc(var(--c) * 1deg));
}

 
그 다음에는 실질적인 주인공인 카드를 꾸며줍니다. 우선 배경과 카드 간의 통일성을 위해 background 를 linear-gradient 라는 값을 사용해서 하단은 완전 투명하게, 상단은 약간 투명하게 하여 깊이감을 만들어 줍니다.
 
그 후 transition 을 1s 로 지정하여 애니메이션이 1초 간 동작하도록 해주며, width 와 height 를 각각 적절한 크기로 지정하여 카드 모양을 잡아 줍니다.
 
이 다음에는 margin: 0 -45px 를 지정하는데, 여기서 0 이 지정된 부분은 margin-top, margin-bottom 을 동시에 지정하는 자리로 0을 지정함으로써 상단과 하단의 여백을 제거합니다. -45px 를 지정한 부분은 margin-left 와 right 를 동시에 지정하는 자리로 -45px 로 지정함으로써 각 .card 가 서로 겹치도록 설정해줍니다.
 

 
 
마지막으로   transform: translateY(calc(var(--r) * -2px)) rotate(calc(var(--c) * 1deg)); 와 같이 지정 해줍니다. 여기서 transform 은 트랜잭션 애니메이션을 지정하기 위한 프로퍼티로 그에 대한 값인 translateY 와 rotate 는 각각 Y축 기준으로 요소의 좌표축을 이동시키는 함수,  요소의 중앙을 기준으로 요소를 회전시키는 함수가 됩니다.
 
여기서 눈여겨 봐야 할 점은 calc 와 var 라는 추가적인 함수인데요. calc() 는 자바스크립트로 따지면 eval() 함수와 유사합니다. 내부에 표현식을 전달하면 해당 표현식을 계산하여 그 자리에 값으로 반환해주는 역할을 합니다.
 
var() 함수의 경우에는 앞서 HTML 마크업을 정의할 때 style 속성의 값으로 --r, --c 라고 지정했음을 기억하실 겁니다. 즉, 해당 변수를 실제 사용하기 위해서 var(--r) 와 같이 전달해주어야 하며, 이렇게 되면 --r:15 라고 지정했었을 경우 var(--r) 의 자리에는 15 라는 숫자가 남게됩니다. 여기서 calc(15 * 2px) 가 되는 경우 15*2 = 30px 가 되고 해당 값이 calc 함수의 자리에 남게 됩니다. 
 
여기 까지 모두 적용하였다면, 결과적으로 아래 이미지와 유사한 형태가 만들어집니다.
 

 

.card:hover 시 동작 설정하기

.card:hover {
  transform: rotate(0) scale(1.5);
  background: white;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0 0;
}

 
마지막으로 :hover 의사 선택자를 적용하였을 때 즉, 마우스가 요소 위에 호버가 되었을 때 동작을 꾸며 봅시다.

우선 transform 속성의 값으로 rotate(0) 과 scale(1.5) 를 지정해줍니다. rotate 는 0으로 지정해줌으로써 앞서 .card 에 적용했던 rotate를 초기상태로 돌려줍니다. scale() 함수는 인자로 단일 숫자값을 전달하게 되면 요소를 수직과 수평으로 지정한 값 만큼 확대되는 애니메이션입니다. 여기서 1.5 로 지정하여 1.5배율 만큼 상하좌우로 확대되도록 해줍니다.
 
그 다음에는 width 와 height 를 100% 으로 지정하여 .card 요소 위에 마우스 호버 하게되면 해당 요소가 뷰포트 전체를 가득채우도록 해줍니다. 이 때 margin 을 0 으로 지정해주어야, 좌우로 여백이 생기지 않습니다.
 
그 다음 z-index 를 1로 지정해서 기본 디폴트가 0인 .card 보다 레이어의 우선순위를 높임에 따라 호버된 요소가 최상위 레어로 표시되도록 설정해줍니다.
 

구현 결과

여기 까지 잘 따라 오셨다면, 전체코드와 시연 동작은 아래와 동일하게 확인하실 수 있습니다. 보실 때는 0.5 배율 이하로 봐주세요. 여기서 자바스크립트를 적용해보신다면 마우스 호버가 아니라 클릭 시 해당 요소가 화면을 가득 채우도록 하여 그 이후에는 이를 페이지로 활용하는 등 아주 동적이면서도 재밌는 효과를 구현하실 수 있을 겁니다. 무엇이든 응용했을 때 재미와  실력이 배가 된다고 생각하므로 다양하게 도전해보시면 좋을 것 같습니다. 
 

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

 

3탄 보러가기

바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄)