리니지M 웹사이트에서 햄버거버튼이 마우스를 가져다대면 화살표로 변하는게 맘에들었다.gif로 만들어서 넣으면 편하겠지만 svg로 만들어봤다.

mousemove이벤트와 event.clientX, event.clientY 로 마우스의 위치값을 받아낸 뒤마우스를 인식할 영역의 중앙위치(얼굴이미지의 중심좌표)를 기준으로 마우스 위치값과의 차이를 계산해 그 값만큼 눈동자, 얼굴이 각각 0.03, 0.04만큼씩 이동하

checkbox로 구현하는데 디자인을 바꾸면서 checkbox의 기능은 구현하기 위해label태그로 연결한 뒤 labal태그에 디자인을 구현하고 기존 checkbox는 display: none;처리했다..(접근성 측면에서는 이러면 안되던가 좀더 고민)정확히 버튼을 클릭

참고한 사이트: https://www.fl-ex.co.kr/ 웹사이트를 구경하다가 스크롤에 맞춰서 라인이 생기는게 너무 멋있었다.svg로 path를만들기 위해 우선 일러스트레이터로 패스를 그렸다.그린 패스의 앵커포인트 위치를 순서대로 정리하고 그 사이에 있는

🚀이미지가 스크롤에 따라 left:0에서 left:100%까지 이동하게 하고싶다. 이동하는 동안 🚀이미지는 35도->0도(수평)->-35도로 자연스럽게 변했으면 좋겠다. 참고한 블로그 : https://devinus.tistory.com/61 로켓은 스크롤 되는

!codepenysuwjwgl-the-styleful/embed/MYgNbvg?default-tab=html%2Cresultoverflow: hidden을 적용한 컨테이너안의 글자를 top:70으로 내려 가려지게 한 뒤애니메이션을 이용해 나타나게한다.

!codepen[ysuwjwgl-the-styleful/embed/OPLQjKJ?default-tab=html%2Cresult] !codepen[ysuwjwgl-the-styleful/embed/emOVEqE?default-tab=html%2Cresult]

치지직 채팅창 CSS