# scroll event

9개의 포스트
post-thumbnail

[JS]Passing arguments to event handlers, The Intersection Observer API

event handler에 event 이외의 추가 인자를 넣어야하는 상황 해결하기 + Refactoring 꿀팁(흔한 로직)반복적인 코드를 함수로 만든다.반복되지 않는 부분을 인자로 받는다. ex) opacitybut! eventHandler 함수는 e 만을 인자로 받

2021년 12월 22일
·
0개의 댓글

211028_스크롤 시 이미지가 나타나고 확대되는 효과

개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다.그 중의 한가지는 스크롤을 내림에 따라 원형이 나타나며 점점 화면을 가득 채우는 사이즈로 커지고, 다음 컨텐츠가 그 화면을 배경으로 자연스럽게 나타나는 효과이다.(넘 멋진 애플의 아이폰 s

2021년 10월 28일
·
0개의 댓글
post-thumbnail

[TIL🔥] Day23(9/8)

오늘은 무한 스크롤 UI를 구현하는 방법에 대해 배웠다. 어려울 것 같다고 생각했는데 바닐라 JS를 반복해서 쓰니 훨씬 빠르고 쉽게 이해할 수 있었다...이게 다 3주간의 고생이 있었기 때문에 가능하다고 생각한다. 프로그래머스 KDT 최고 ><scroll even

2021년 9월 8일
·
0개의 댓글
post-thumbnail

W1 - 기술정리 | Intersection Observer

Intersection Observer API는 target element와 ancestor element 또는 top-level document's viewport 사이 교차지점(intersection)의 변화를 비동기적으로 관찰(observe)하는 기능을 제공한다.

2021년 7월 28일
·
0개의 댓글
post-thumbnail

react 스크롤시 네비게이션 변환

진행하고 있는 빵덕 프로젝트의 테마상세 페이지에서 스크롤시 네비게이션바의 색이 변환하는 디자인이 나왔다. 스크롤 위치를 어떻게확인할까 고민을 하다가 IntersectionObserver를 사용하기로 하였다.1.eEffect안에 IntersectionObserver로 r

2021년 5월 17일
·
0개의 댓글
post-thumbnail

COINSS: React Custom Hooks로 Scroll Event 구현하기

Scroll Event를 Custom Hook으로 빼보는 방법에 대해 공부해보도록 하겠습니다. 일반적인 Scroll Event 일반적으로 Scroll Event를 감지하기 위해서는 addEventListener('scroll')을 이용하면 됩니다. 앞에 스크롤 이벤

2021년 5월 8일
·
3개의 댓글
post-thumbnail

scroll 값으로 opacity 값 비율구하기

대표적으로 애플사이트에서 scroll값을 이용해 다양한 효과를 연출하는 것을 볼 수 있다. ( 멋지다, 이쁘다..) scroll값으로 opacity 값 비율 0~1 까지의 범위를 구하는 법을 알아보도록 하겠습니다.만약 위와 같이 4개의 섹션이 존재하고, section

2021년 2월 22일
·
1개의 댓글
post-thumbnail

TIL#8 React에서 Scroll event 사용하기

React에서 간단한 Scroll event 사용하기

2021년 2월 21일
·
1개의 댓글
post-thumbnail

TIL 89 | dimmed 영역 스크롤 막기

햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다

2020년 12월 14일
·
0개의 댓글