DAY #3
- 문제
👉 문제 바로가기
The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
피라미드: 이집트의 실제 피라미드만큼 도전적이지는 않지만 ✨그림자 길은 쉽지 않습니다.✨
정말 너무 어려웠다!
나는 애니메이션 효과를 잘 쓰지 않아서 문제를 보고 엥 이걸 CSS로만 만든다고?! 라고 생각했다.
아무리 봐도 어떻게 만들어야 하는지 감 조차 오지 않았다.
저 피라미드 모양은 어떻게 만드는거지?!
저 해는 어떻게 저런 모양으로 움직이는거지?!
저 그림자는 어떻게 저렇게 꼭지점이 위아래로 움직이는거지?!?!
이것들을 직접 만들어 보면서 알게 되었다....
- 내가 만든 CHALLENGE Code
✨만들면서 알게된거✨
clip-pathtransform-originanimation자세히
📝 clip-path 속성이란?
clip-path 속성이란 요소를 클립(잘라내기)할 수 있는 속성이다!! 클리핑 범위 안 부분은 보여지고, 바깥은 숨겨진다.
제대로 사용하기 위해서 clippy 사이트를 이용했다!!
이런 모양을 만들면 아래쪽에 이렇게 코드가 나온다!! 이걸 그대로 가져다 사용하면 된다 ㅎㅎ
clip-path: polygon(50% 50%, 70% 100%, 0 100%);clip-path를 이용하여 피라미드 모양을 만들 수 있었다.
📝 transform-origin 속성이란?
자, 이제 해 모양을 회전 시켜야 하는데, rotate기준점을 바꿔서 회전 시킬 수 있는 방법을 알아야 했다.
transform-origin 속성이란 transform속성과 함께 기준점을 정하기 위해 사용하는 속성이라고 한다.
기본점은 정 중앙(50%, 50%) 이다.
이를 이용해서 해 모양을 회전시킬 기준점을 바꾸어 보았다!!
transform-origin: 50% 400%;(X축, Y축) 이다. 좌측 상단이 (0,0) 이고, 우측 하단이 (100%, 100%) 이다.
해 모양을 기준으로 (중앙, 하단 약 4배)를 잡기 위해 (50%, 400%)를 설정해주었다.
📝 animation @keyframes 이용
이 문제에서 가장 중요한 부분이라고 할 수 있다.
이전 문제에서도 사용한 속성이었지만 @keyframes을 조금 더 딥하게 생각해야 풀 수 있는 문제였다.
문제를 보면, 해가 스윽 떠오르다가 ✨잠시 멈췄다가✨ 다시 지나간다.
애니메이션 작성은 0% ~ 100% 로 나눌 수 있는데, 해가 멈추는 시점은 약 30%쯤인것 같았다.
그래서 0%, 30%, 100% 세 구간으로 나누었다.
@keyframes 애니메이션 이름 {
0% {
}
30% {
//여기가 멈추는 구간
}
100% {
}
}이제 저기다가 애니메이션을 잘....넣기만 하면 된다...ㅎㅎ
애니메이션을 잘 써보지를 않아서 처음엔 익숙치가 않았다....
그래서 서치도 많이 하고 참고도 많이 했음...
어찌저찌 해의 움직임과 피라미드 색 변하는 부분은 잘 해결했다!
하지만 여기서 가장 큰 문제는 바로...
😫그림자!!😫
✨그림자 길은 쉽지 않습니다.✨라는 문제의 설명과 같이 정말 쉽지 않았다 ㅋ_ㅋ🥴
@keyframes shadow {
0% {
clip-path: polygon(18% 0, 82% 0, 100% 0%);
}
30% {
clip-path: polygon(18% 0, 82% 0, 100% 70%);
}
100% {
clip-path: polygon(18% 0, 82% 0, 0 10%);
}
}이렇게 그림자의 clip-path를 바꿔서 해가 지는 움직임은 만들었는데...!!!
이렇게만 하면 꼭지점 위치가 변하지를 않았다!!!
도대체 어떻게 한거지🤔 skew를 썼나? scale을 썼나?? 도대체 뭐지?!?
하고 있다가 이렇게 고민할 시간에 예시들을 참고하자! 싶어서 어떻게 했나 봤더니
정말 생각보다 쉽게 하고 있었다....!!!
바로 그림자 박스 ✨높이 조절✨을 해주면 되었던 것!
@keyframes shadow {
0% {
height: 0%;
clip-path: polygon(18% 0, 82% 0, 100% 100%);
}
30% {
height: 20%;
clip-path: polygon(18% 0, 82% 0, 100% 100%);
}
50% {
height: 10%;
}
65% {
height: 12%;
}
100% {
height: 0%;
clip-path: polygon(18% 0, 82% 0, 0 100%);
}
}그림자 높이는 4번 정도 변화하는것 같아서 변화 구간에 위와같이 50%, 65% 를 추가했다.
우선 clip-path의 높이는 모두 100%로 설정 해주고 그림자 박스의 높이만을 건드렸다.
총 높이가 180px이니 @keyframes 30%까지의 높이를 180px의 20%정도로 주고,
그다음 10% > 12% > 0% 순으로 조정했다.
@keyframes과 ✨높이✨는 계속 조정 해보면서 최대한 자연스러운 지점을 찾아냈다.
딱 저정도가 가장 자연스러운 지점이었다. (내생각)
결국 완성한 나의 결과물..!!!!
휴우 이번에는 해가 지는 타이밍도 그렇고 transition-timing-function 도 그렇고 움직임 시간이 문제와 정확히 들어맞지는 않지만!! (사실 딱 들어맞을 수가 없음. 완전히 똑같다면 그건 배낀거임)
가장 중요한 그림자 문제를 해결해서 굉장히 뿌듯하다...!!!!😊
@keyframes이 앞으로의 핵심 포인트 일것 같다는 생각이 든다 :)
열심히 연습해서 얼른 익숙하게 만들어야지......👍
끝
