헤더 썸네일형 리스트형 [jQuery] 스크롤시 색상이 변하는 헤더 스크롤시 특정 구간에 들어갔을 때 색상이 변하는 헤더입니다. 헤더 색상을 제이쿼리 animate로 변경할 수도 있지만, css로 해결하는 편이 성능 면에서 훨씬 유리합니다. 헤더 색상이 변했으면 하는 부분에 "page-start" 클래스를 추가한 후 그 부분에 스크롤이 갈 때 헤더에 "down" 클래스를 추가하게 합니다. down 클래스는 transition을 이용해서 자연스럽게 색상이 변할 수 있도록 합니다. transition을 이용하는 것이기 때문에 꼭 background-color가 아니더라도 opacity, width, height 등을 이용하여 다양하게 변형시킬 수 있습니다. (opacity:0 -> 1 로 해서 헤더가 나타나게 한다든지, height:100px -> 50px 로 해서 헤더 높.. 더보기 이전 1 다음
