본문 바로가기

패럴랙스효과3

자바스크립트 패럴랙스 효과 : 나타나기 자바스크립트 : 패럴랙스 효과 : 나타나기 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤의 위치에 따라 콘텐츠의 각 내용물들이 순차적으로 나타나는 유형을 작업해 보도록 하겠습니다. 1. JAVASCRIPT로 스크롤 이벤트 만들어 주기 2-1) addEventListener window.addEventListener("scroll", 함수명); 지금까지는 addEventListener로 스크롤 이벤트를 작업해 주었습니다. 그러나, 이 방법은 스크롤을 매번 감지하기 때문에 버벅거림 현상이 나타날 수 있습니다. 따라서 이번에는 재귀함수를 사용하여 작업을 하도록 하겠습니다. 2-2) 재귀함수(Recursion) function scroll(.. 2022. 9. 18.

자바스크립트 패럴랙스 효과 : 사이드 메뉴 자바스크립트 : 패럴랙스 효과 : 사이드 메뉴 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 상단 메뉴가 아닌 사이드 메뉴를 만들어 주고, 현재 위치한 스크롤값에 따라 메뉴에 애니메이션 효과를 추가해 주었습니다. HTML 소스 HTML은 먼저 nav, main, aside 세 파트로 나누어 주었습니다. nav에는 9개의 메뉴, main에는 9개의 콘텐츠, aside에는 스크롤의 위치값을 볼 수 있게끔 만들어 주었습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 비가 온 다음에는 맑은 날씨가 된다. 03 section3 정직한 사람이 없다고 말하는 사람이야말로 가장 정직하지.. 2022. 9. 8.

자바스크립트 패럴랙스 효과 : 메뉴 이동 자바스크립트 : 패럴랙스 효과 : 메뉴 이동 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 스크롤의 위치에 따라 메뉴 탭의 클래스에 변화를 주고, 메뉴를 클릭하면 메뉴가 있는 곳으로 부드럽게 이동하게끔 작업해 보도록 하겠습니다. HTML 소스 HTML은 먼저 nav, main, aside 세 파트로 나누어 주었습니다. nav에는 9개의 메뉴, main에는 9개의 콘텐츠, aside에는 스크롤의 위치값 목록을 만들어 주었습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 비가 온 다음에는 맑은 날씨가 된다. 03 section3 정직한 사람이 없다고 말하는 사람이야말로 가장 정직하지 .. 2022. 9. 6.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바