반응형 스크롤 이벤트로 와이즐리 헤더 만들기 탐나는 와이즐리 홈페이지의 헤더 이벤트 한때 와이즐리 사용자로서 이벤트를 하길래 오랜만에 들어와봤다. 옛날과 달리 홈페이지가 엄청 깔끔하고 보기에 편해진 것 같다. 그 중 와이즐리의 헤더 UI가 너무너무 신기했다. '이 UI 탐난다. 따라해봐야지' 생각하고 바로 실행에 옮겨봤다. 먼저 와이즐리의 헤더에 발생하는 이벤트를 정리해보자. 스크롤을 내리면 헤더의 배경 색상이 바뀐다. (transparent -> #fff) 조금 더 내리면 헤더가 올라간다. (translateY 사용) 스크롤을 올리면 헤더가 내려온다. (translateY 사용) 스크롤이 맨 위에 도착하면, 헤더의 배경 색상이 바뀐다. (#fff -> transparent) HTML, CSS 헤더의 기능 구현에 목적을 두어서 페이지는 간단하게 만.. 2021. 8. 22. 이전 1 다음 반응형