# scrollY

nuyhes

패럴랙스 스크롤링(parallax scrolling)은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법이다. 하나의 이미지를 여러 개의

nalsae

✍ 22년 9월 13일 공부한 내용 정리

onnuri

스크롤로 무한 텍스트 플로우 되는 홈화면을 구현했다 이때 홈화면 전체를 보여주기 위해 body태그에 width, height 값을 100% 로 설정했었는데 스크롤 이벤트를 읽기 위해서는 height 값을 설정하면 스크롤 값을 읽지 못한다. 그래서 화면 전체를 보이고 싶

moolbum

웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있습니다,절대위치를 이용해 스타일을 꾸미거나 로직을 만들때 사용할 수 있습니다.해당 요소가 웹 페이지를 기준으로한 위치입니다.스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를

gygy

처음에는 이렇게 접근했다.css 'nav-sticky'는 position: fixed;를 가지고 있다.이 클래스를 추가해줌으로써 nav의 position을 relative에서 fixed로 바꾸어주어 스크롤할 때 함께 따라올 수 있도록 했다(아래 gif참고)한 가지 간과

gygy

const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height / 2;얼마나 수직으로 스크롤했는지를 픽셀로 나타내는데, 더 정확히 말하면 scrollY는 현재 뷰포트 위쪽 모서리의 Y좌표를 반환한

hikoand

스크롤을 트리거로 요소의 좌표를 특정 구간동안 제어하는 로직을 통해 window.scrollY, .offset() 등 요소의 좌표를 반환하거나 제어하는 메서드를 심화학습한다.