본문 바로가기

웹(Web)20

Scroll 이벤트 위주의 사이트 만들어 보기 scroll 중심의 사이트 만들어 보기 1. 헤더 라인 좌측부터 section0 ~ section6 클릭하면 이동 2. 스크롤바를 살려뒀을 때 해줘야 될 설정이 생각보다 많아서 없애는 대신 좌측 옆에 화살표 표시 3. 한번 스크롤시 한섹션 이동 4. 마우스 위아래로 무빙 첫 번째에서 두 번째 섹션 이동 시 가볍게 한 섹션 이동 세 번째 섹션은 가로 스크롤 네 번째 섹셕은 스크롤시 투명도 변경 다섯 번째 섹션 15초 동안 스크롤 중지 && 애니메이션 실행 여섯 번째 섹션은 드롭 다운 && 클릭 이벤트 마지막 섹션은 클릭시 링크 이동 해결 하지 못한 문제점 1. 스크롤바를 마우스 버튼으로 잡고 내릴 시 그 위치에서 스크롤 불가능 2. 확대를 하고 화면을 작게하면 가로 스크롤 후 자동 세로 스크롤 불가능 3... 2024. 2. 27.
position:fixed 가운데 정렬 하는법 margin:0 auto; left:0; right:0; position:fixed; 2024. 2. 23.
setTimeout 과 for문 이용시 중복 방지 1. setTimeout을 사용할때 for문을 이용하면 사용한 i 를 전부 clearTimeout를 해주어야 한다. See the Pen Untitled by Juno Kim (@Juno-Kim-the-looper) on CodePen. 2024. 2. 12.
section 스크롤중 어느 박스에서 이벤트 발생 1. 스크롤중 두번재 박스에서 5초간 스크롤 정지 See the Pen Untitled by Juno Kim (@Juno-Kim-the-looper) on CodePen. 2024. 2. 10.