마우스를 스크롤하면 스르륵 올라오는 카드를 만들어보자

See the Pen Hovering card by koreanraichu (@koreanraichu) on CodePen.

이거 해볼거다. 퀄이 좀 조잡하지 않냐고요? 초보한테 너무 많은 걸 바라지 말자.

---

일단 여기서는 크게 두가지를 해볼건데

1. 첫번째로 마우스 스크롤을 하면 숨어있던 카드가 나타나게 해 볼거고

2. 그 카드가 밑에서 뿅 하고 올라오게 해볼거다.

---

일단 HTML 코드는 볼 거 없고 CSS부터 보자.

 

.wrapper {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
}

여기는 뭐 없고 그냥 가로 길이만 50%로 해 놓았다.

 

.card {
  width: 300px;
  height: 300px;
  background-color: #7c6bce;
  color: #6cd5d5;
  text-align: center;
  margin: 0px 10px 0px 10px;
  border-radius: 10px;
  transition: 1s;
}

카드는 카드 전체랑 개별로 따로 CSS를 준 부분이 있는데, 이건 전체 속성이다. 여기도 딱히 볼 건 없다.

 

.card:nth-child(1) {
  opacity: 0;
  transform: translateY(75px);
}

.card:nth-child(2) {
  background-color: #357ae9;
  transition-delay: 1s;
  opacity: 0;
  transform: translateY(75px);
}

.card:nth-child(3) {
  transition-delay: 2s;
  opacity: 0;
  transform: translateY(75px);
}

여기는 좀 보고 가셔야된다. 일단 CSS를 잘 보니까 두번째랑 세번째에는 각각 트랜지션 딜레이가 1초 차이로 달려있는데(0초 1초 2초), 이건 뭐냐면 카드를 하나씩 보여줄거기때문에 일정한 차이를 두고 넣은거다. 따라서 시간차 공격 관련해서 자바스크립트에서 크게 만질 건 없다.

 

tranalateY는 세 카드에 다 공통적으로 적용되어 있는 속성인데, 이렇게 해 두면 카드가 75픽셀 아래에 위치하게 된다. 일단 카드를 '나타나게만' 할 거라면 translate는 안 봐도 된다. 저건 카드를 밑에서 나타나게 하기 위해서 만든거라...

 

var wrapper = document.querySelector('.wrapper');
var cards = document.querySelectorAll('.card');

window.onwheel = scroll;
var scrollValue = 0;

function scroll(e){
  scrollValue += e.deltaY;
  if (scrollValue > 1) {
    cards.forEach(function(item){
      item.style.opacity = 1.0;
      item.style.translate = "0px -75px";
    });
  };
  if (scrollValue < 1) {
    cards.forEach(function(item){
      item.style.opacity = 0.0;
      item.style.translate = "0px 75px";
    });
  };
};

window.onwheel은 휠 굴릴때 저 함수를 실행하라는 얘기고 밑에 있는 건 변수다. 여기서 봐야 할 건 function 안에 있는 것 뿐.

 

scrollValue += e.deltaY;
if (scrollValue > 1) {
	cards.forEach(function(item) {
		item.style.opacity = 1.0;
		item.style.translate = "0px -75px";
	});
};

밑에 있는 if문은 위의 if문이랑 반대로 마우스 휠을 올리면 카드가 사라지는거다. 그니까 위에것만 일단 보자. 여기서 카드를 그냥 '나타나게' 하고 싶다면 opacity만 1.0으로 바꾸면 되는데, opacity는 투명도다. 이게 0이면 안보이는거고 1로 갈수록 잘 보이는건데, 카드를 숨겨뒀다가 어느정도 마우스 휠을 내리게 되면 카드가 보이게끔 한 것이다.

 

밑에서 카드가 올라오는 효과를 주고 싶다면 translate를 같이 줘야 하는데, 각 카드들이 지금 75픽셀 밑에 위치해 있으니까 75픽셀 위로 올려주면 된다. 따옴표 안에 있는 건 translateX(가로)와 translateY(세로).

 

See the Pen Hovering card 2 by koreanraichu (@koreanraichu) on CodePen.

카드를 세로로 배치한 다음 스크롤할때마다 왼쪽에서 하나씩 튀어나오게 코딩한 것. translate는 X만 줬다. 처음에는 양 옆에서 튀어나오는 걸 하려고 했더니 JS가 트랜스폼을 못갖고와… ㅡㅡ