DAY #2
- 문제
👉 문제 바로가기
Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher (움직임 有)
▲ 누르면 동작하는 햄버거 버튼 만들기!!
- 내가 만든 CHALLENGE Code
움직이는 햄버거 버튼을 만들기 위해서는 클릭 이벤트가 필요하다!
클릭 이벤트를 사용하기 위해서는 JS가 필요하다...
JS 사용을 지양하라고 했지만 일단 나는 사용하기는 했음.
나중에 보니 모범 답안에도 JS를 사용하고 있었다ㅎ
(궁금해서 다른사람들은 어떻게 했나 하고 찾아보니 checkbox와 label을 이용해서 JS안쓴 사람도 있더라.. 천재인가)
버튼 분석을 해보자면
한번 클릭 했을때 X 자 모양이 되기 위해서 첫번째 막대기(menu_1)와 세번째 막대기(menu_3)는 가운데로 스-윽 하고 이동하고, 두번째 막대기(menu_2)는 크기가 줄어들면서 사라진다.
이동 후에 45도 회전하여 X자 모양을 만들게 된다. 이것이 0.8초 정도로 동작된다.
이를 구현하기 위해 일단 막대기들을 position absolute top을 기준으로 배치한 다음,
클릭시 active가 추가되게 하였다.
div.classList.toggle("active");
active가 추가되면 transition을 주고 top 위치를 바꾸어 클릭 하면 가운데로 스-윽 오게 만들었다.
하지만 여기서 문제는 스-윽 하고 온 다음에, 45도 회전을 시키기 위해 rotate(45deg)를 주었는데
top 이동과 rotate가 동시에 일어나는 것이다!!!!!
😲
럴수가... 이문제를 해결하기 위해서는 animation @keyframes를 사용해야 했다.
// ===== animation ===== //
...
&.active {
animation: menu_animation1 0.8s forwards; //애니메이션이 끝난 후 그 지점에 그대로 있게
}
...
@keyframes menu_animation1 {
50% {
top: 22px;
transform: rotate(0deg);
}
100% {
top: 22px;
transform: rotate(45deg);
}
}
@keyframes menu_animation2 {
100% {
transform: scale(0);
}
}
@keyframes menu_animation3 {
50% {
top: 22px;
transform: rotate(0deg);
}
100% {
top: 22px;
transform: rotate(135deg);
}
}
휴우 이거 만드는데 고생을 좀 했다..ㅎㅎ
애니메이션을 50% 기준으로 나누어 top 이동과 rotate 효과에 시간차를 주었다.
(두번째 막대기(menu_2)는 바로 100% scale(0)으로 가게함)
아 그리고 애니메이션 효과가 처음 지점으로 돌아오는 것을 막기 위해서는 forwards를 사용하면 된다는 사실을 알았다!! 👍
이럴수가 여기서 또 문제!!!!!!!
🤯
클릭을 한번 더하면 다시 三자로 돌아와야 하는데 뭐 방법이 없는 것이다...............
(이것을 아주아주 고민 하다가 모범 답안을 봐버림)
해결책은 그냥 animation @keyframes를 한번 더 쓰면 되는 것이었다 ^____^!!
...
// ===== animation_reverse ===== //
&_1 {
...
animation: menu_animation1_rev 0.8s forwards; // 원위치로 돌아오게
}
@keyframes menu_animation1_rev {
0% {
top: 22px;
transform: rotate(45deg);
}
50% {
top: 22px;
transform: rotate(0deg);
}
}
@keyframes menu_animation2_rev {
0% {
transform: scale(0);
}
30% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes menu_animation3_rev {
0% {
top: 22px;
transform: rotate(135deg);
}
50% {
top: 22px;
transform: rotate(0deg);
}
100% {
top: 44px;
transform: rotate(0deg);
}
}
뒤로 돌아오는 효과의 animation을 하나 더 만들고, 클릭 전에 넣어주면 되는 것!!
(이것도 머리좀 많이 씀 ㅠ_ㅠ)
하지만 여기서 또 문제 ㅋㅋ
😵
이렇게 하면 ㅋㅋㅋㅋ 페이지 진입시부터 돌아오는 효과가 실행된다 ㅋㅋ
이를 막기 위해서 처음 진입시 막대기들(menu_1~3)에 no_animation 을 주고...
한번 클릭했을때 부터 빼버리면 된다....ㅎㅎ
.no_animation {
animation: none; //처음 시작할 때 애니메이션 실행 X
} div.classList.remove("no_animation");이렇게 하여 드디어 완성....!!!!!!🥳🥳
우여곡절 완성한 두번째 문제!!
애니메이션은 내가 다 직접 작성했지만, 작동 방법에 대해서는 참고를 많이 한것 같다...
그래도 똑같이 잘 구현한 것 같아서 아주 뿌듯할 따름이다 ^____^
끝
