본문 바로가기
웹(Web)/프로젝트

Scroll 이벤트 위주의 사이트 만들어 보기

by JennieJuno 2024. 2. 27.

scroll 중심의 사이트 만들어 보기

 

1. 헤더 라인 좌측부터 section0 ~ section6 클릭하면 이동

2. 스크롤바를 살려뒀을 때 해줘야 될 설정이 생각보다 많아서 없애는 대신 좌측 옆에 화살표 표시

3. 한번 스크롤시 한섹션 이동

4. 마우스 위아래로 무빙

 

첫 번째에서 두 번째 섹션 이동 시 가볍게 한 섹션 이동

 

세 번째 섹션은 가로 스크롤

 

 

네 번째 섹셕은 스크롤시 투명도 변경

 

다섯 번째 섹션 15초 동안 스크롤 중지 && 애니메이션 실행

 

여섯 번째 섹션은 드롭 다운 && 클릭 이벤트

 

 

마지막 섹션은 클릭시 링크 이동

 

해결 하지 못한 문제점

 

1. 스크롤바를 마우스 버튼으로 잡고 내릴 시 그 위치에서 스크롤 불가능

2. 확대를 하고 화면을 작게하면 가로 스크롤 후 자동 세로 스크롤 불가능

3. setTimeout 중복 실행 제대로 컨트롤 불가능

4. setino4 에서 resize시 for문이 리셋됨(이유는 scroll 이벤트에 넣어놨기 때문에 화면이 크고 작아지면 scroll이 움직이면서 이벤트가 발생함)

5. 요소 위에서 휠을 하거나 드랍다운 됐을경우 이벤트 실행이 안됨

6.resize를 하고 클릭으로 이동시 마우스 아이콘이 안나타남

7.스크롤 모양을 만들려고 했으는데 컨트롤 힘듬

 

GitHub: https://jenniejuno.github.io/scroll_event/

'웹(Web) > 프로젝트' 카테고리의 다른 글

할 일 앱  (0) 2024.04.04
Up & Down  (0) 2024.04.03