일을 하면서 ie가 서비스 중지되고 sticky 같은 여러 css를 사용할 수 있게 되었다. 그중에서 ie에서는 동작했었지만 위험성이 높아 잘 안썼던 clip-path를 사용해서 구현했던 경험을 얘기하려한다! (굵은 글자만 읽어도 무방!)
📌커스텀 말풍선 제작이 가능해!?
말풍선을 만들때 보통 네모나 동그라미 같은경우는 쉽지만 어느정도의 커스텀이 들어가면 보통은 이미지를 이용하여 제작했다. 하지만 리사이징 문제때문에 대응하기엔 너무 까다로웠다.
clip-path를 이용한다면 여러가지 커스텀 말풍선 제작이 가능하다.
단점으로는 border를 사용할 수 없다. 뭔가... 깎아 먹는 느낌이라 스트로크가 생기더라도 클립패스 퍼센트에 의해서 까인다..
검색을 하던 도중 발견한 방법은 안에 태그를 생성하여 원하는 border 두께만큼 넓이를 줄여서 가운데 정렬하는 방법으로 해결했다.
이를 이용하면 재밌는 효과를 낼수 있을거라 생각이 들어서 모션을 제작하는데 활용했다!
📌커버 모션으로 활용!
보통 위에 태그를 absolute로 겹쳐두고 넓이를 0으로 만들던지해서 모션을 만들곤 했는데 여기에선 문제가 한가지 생길수 있다.
넓이 값이 0으로 줄어들면서 bg size를 cover로 준경우 안에 이미지가 움찔거린다는 것이다.
쩝...
그러나 클립패스를 이용한다면 깔끔하게 형태를 유지한채로 벗겨낼수 있다. (사용하면서 느끼기엔 해당 컨텐츠의 넓이나 높이는 안보일뿐 유지 되는것 같다.)
🙄코드펜 html 탭 닫으면 result탭에 버튼이 있으니..그걸 이용하세여..
코드펜은 버튼으로 동작하게 만들었지만, 실제 구현사이트에선 gsap를 활용 스크롤트리거로 스크롤 인트랙션을 만들었다..!
이미지에 클립패스를 쓴 예시들을 보여줬지만, 텍스트 같은 모든곳에 활용 가능하니 알아 두시길! ٩(｡•ㅅ•｡)
마지막으로 클립패스는 점 갯수가 늘어날수록 복잡해지므로 에디터 사용을 추천드린다!
