DAY #13
- 문제
👉 문제 바로가기
User Gallery: An idea for a transition between user overview and profile page.
사진을 클릭하면 프로필이 오버레이 되는 효과를 구현하는 문제이다!
👉 문제 분석~!
- 각각 4개의 사진 위에 마우스 오버시
+버튼이 커져있는 상태에서 작아지며 스르륵 나와야 한다. - 클릭 시, 프로필 배경 > 프로필 사진 >
x버튼 순으로 스윽 나와야 한다. x버튼 클릭 시, 반대의 순서대로 스윽 없어져야 한다.
이 세가지가 중요 포인트인듯 하다. 이를 중점으로 문제를 풀어보려고 한다!
- 내가 만든 HTML Code
- 내가 만든 CSS Code
일단 grid 로 4개의 사진을 배치했다.
사진 div 안에 + 버튼을 감싸고 있는 div 를 넣고, 사진 div 위에 마우스 오버시 + 버튼이 나오게 하는 CSS를 작성하였다.
@mixin visible {
opacity: 1;
visibility: visible;
}
@mixin hidden {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease-in-out;
}
...
.overlay {
@include hidden;
@include center;
...
}
.plus {
...
transform: scale(2);
}
&:hover .overlay {
@include visible;
}
&:hover .plus {
@include visible;
transform: scale(1);
}scale(2) > scale(1) 을 이용하면 이렇게 위에서 분석한 1번을 구현할 수 있다.
2번을 구현하다보니 의문인 점이 생겼는데,
각 사진을 클릭할때마다 프로필이 다 다르게 나와야 하는건가?? 했는데 다행히 그건 아니었다.
(다 같은 사진이 나옴)
덕분에 훨씬 구현이 쉬워졌다 (ㅋㅋ)
👉 프로필 오버레이 작업!
일단 프로필 오버레이를 .top .bottom .profile .close 4요소로 나누어 배치한 다음, 화면 밖으로 위치하게 한다.
사진을 클릭하면 화면 밖으로 넘어간 요소를 제자리로 오게하면서 transition 을 건다.
이때!! 프로필 transition-delay 를 주어 transition 되는 순서를 다르게 하면 된다.
.
.
.
그런데 여기까지만 하면!!😲 위에서 분석한 3번 즉, x를 눌러 없어질때 반대 순서대로 없어지지가 않고 보여진 순서대로 사라지게 된다!! (당연한 소리긴 함)
반대순서로 없어지게 하려면 어떻게 해야하나 고민을 많이 했다.
👉 그래서 반대순서로 없어지게 하려면?
사진 클릭시, 프로필 요소를 감싼 div (.cover) 에 .show 클래스를 추가하여 프로필 오버레이가 나왔을때 / 없어졌을때 로 나눈다.
.cover.show {
.top {
...
transition: all 0.7s ease-in-out;
}
.close {
...
transition: background 0.3s ease-in-out, top 0.6s ease-in-out 0.6s;
}
.profile {
...
transition: all 0.8s ease-out 0.3s;
}
.bottom {
...
transition: all 0.7s ease-in-out;
}
}이런식으로 show 되어있을 때와, 되어있지 않을 때 transition-delay 속도를 다르게 주어 없어지는 순서를 다르게 만들면 된다!
- 결과물
짠! 완성!
구현하는데는 얼마 걸리지 않았지만 소스를 간결하게 줄이는데 시간이 조금 더 걸린것 같다.
중복되는 코드를 막기위해 @mixin @include 를 많이 사용했고, 처음에 click 이벤트를 줄때 .css() 함수를 사용하였는데 너무 지저분해서 .show 클래스를 넣었다 뺐다 하는 방식으로 변경하였다.
1회성 프로젝트 말고 유지보수를 쉽게 하려면 나중을 생각해서라도 코드를 간결하게 만드는 것이 중요하다는 것을 일하면서 뼈저리게 느꼈기 때문에!
평소에도 간결하게 짜려고 하는 중이다. 😊
끝
