ZeroToHunnit Coding

스크롤하는 것을 잘 보면 스크롤을 내릴 때 navbar가 사라지고 스크롤을 올리면 navbar가 위에서 스르륵 나온다. 이렇게 구현하게 되면 사이트에 방문한 사람들이 스크롤을 내리면서 내용에 잘 집중할 수 있을 것이고 메뉴를 통해서 다른 페이지로 이동하고자 할 때 굳이 맨 위로 올라가지 않아도 그 자리에서 스크롤 한 번만 위로 해주면 navbar가 나오기 때문에 아주 좋은 navbar 구현법이라고 생각한다. HTML 저는 navbar입니다. CSS .navbar{ width: 100%; height: 100px; background-color: black; color: white; font-size: 60px; padding: 0 30px; } .section{ width: 100%; height: 30..

위와 같이 스크롤하면 중간에 박스의 크기가 커지고 글자의 크기와 위치가 변형되게 만들어보았다. HTML 제 위치로 찾아갑니다~ CSS body, html{ contain: paint; } .section{ width: 100%; height: 300vh; } .wrap{ position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .bg{ width: 100%; height: 100%; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.3); } .title{ width: 100%; text-align: cent..

position: sticky를 활용한 한쪽 고정, 한쪽만 스크롤하게 하기 이 전에는 스크롤하다가 특정 위치에 도달하면 position: fixed를 담은 class를 추가하는 방법으로 사용했는데, position: sticky를 알게된 후에 더욱 쉽게 가능해졌다. HTML 안녕하세요 저는 스크롤됩니다. 신기하죠? position: sticky로 쉽게 신기한 걸 구현 가능합니다. 나는 고정 sticky-box라는 큰 div박스 안에 left와 right로 나눠 left는 스크롤되게, right는 고정되게 html을 구성했다. CSS .sticky-box{ margin-top: 500px; margin-bottom: 500px; display: flex; height: 400vh; } .left, .rig..

Scroll Event(스크롤 이벤트)를 이용한 div 크기 변경 * position: sticky * 일차함수 * Scroll Event Preview Scroll의 위치가 600 ~ 1400 까지는 width: 50vw ~ 100vw로, height: 50vh ~ 100vh 로 서서히 커지게 하고, 4000 ~ 4600에서는 width: 100vw ~ 0로, height: 100vh ~ 0으로 서서히 없어지게 한다. HTML 나 커질거임 HTML은 이렇게 간단하게 설정해줍니다. CSS .bg{ width: 100%; height: 5000px; margin-top: 600px; margin-bottom: 600px; } .bx{ width: 50vw; height: 50vh; background: #..