[자바스크립트 응용] 페럴렉스 효과01 / 스크롤변화에 따른 효과 적용하기

패럴랙스 효과 01

페럴랙스 효과에 대해서 알아보겠습니다. 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 그렇기때문에 자바스크립트의 스크롤 관련 메서드에 대해서 잘 알아야 사용할 수 있는 효과입니다.
요약하자면 스크롤변경에 따른 행동(?)을 조정하는 효과입니다.

---

원본 소스 보기 원본 사이트

---

▶ 각 섹션의 offset값을 구해준뒤 만들어 놓은 offset__info에 넣어줍니다. '현재 스크롤값 >= 각 섹션의 offset값' 일때 메뉴바에 active클래스를 추가해서 현재메뉴가 표시되게 해주고, 나머지 메뉴바는 active를 제거하여 활성화된 액티브값이 표시되게 해줍니다.

JS 소스

const scroll = document.querySelector("#parallax__info .scroll span");
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    // forEach문 02
    document.querySelectorAll(".content__item").forEach((element, index) => {
        if (scrollTop >= element.offsetTop - window.innerHeight / 2) {
            document.querySelectorAll("#parallax__nav li").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector(`#parallax__nav li:nth-child(${index + 1})`).classList.add("active");
        }
    });

    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
    // info
    for (let i = 1; i <= 9; i++) {
        document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
    }
});

// 스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach((li) => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth",
        });
    });
});

■ 핵심 파헤치기🪓

✔ preventDefault

기본(default) 막다(prevent).
원래 a태그나 submit태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침되어 실행되는 기능을 가지고있습니다. 이 메서드는 이러한 태그의 기본 이벤트(동작)을 막는 기능을 합니다.
이 속성은 이벤트 메서드 입니다. 밑에 간단한 예시를 만들어 봤으니 눌러보시고 파악해보세요.

메서드 미적용_ 눌러보세요 (구글로 새창이동)
메서드 적용_ 눌러보세요

<a href="http://www.google.com" target="_blank">메서드 미적용</a>
<a href="http://www.google.com" target="_blank" class="t_ablock">메서드 적용</a>

//스크립트
const ablock = document.querySelector(".t_ablock");
ablock.addEventListener("click", el => {
     el.preventDefault();
     alert("알람문구")
});

✔ getAttribute

선택한 요소의 특정 속성값을 가져옵니다.

문법 : element.getAttribute( 'attributename' )

여기서는 a링크의 href값을 가져오는게 되겠군요. 메뉴1의 href를 예시로 들자면 #section1을 가져오겠네요

✔ documentElement.scrollTop

let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

스크롤바의 현재 위치를 가져오는 방법인데요. 모든 문법이 현재위치를 가져올 수 있습니다. 다만 IE브라우저의 경우 window.scrollY의 프로퍼티가 존재하지 않습니다. 이 경우 document.documentElement.scrollTop;를 사용합니다. 그래서 호환을 위해서 위와 같이 문법을 사용한 것입니다. 저렇게 사용하면 IE 및 대부분 브라우저에서 현재 스크롤위치를 반환하게 됩니다.

✔ scrollIntoView

이 메서드는 화면의 특정 위치로 이동시켜주는 함수입니다. 요소 기반이므로 특정 요소를 기준으로 스크롤을 이동시킵니다. 여기서는 a링크의 href를 요소로 지정해주었으므로 지정한 href요소로 이동을 시켜주겠네요. 그리고 3개의 문법(아무것도 사용하지 않고 그냥 사용 / 불린을 사용 / 옵션값 사용)중 옵션값을 사용하는 문법을 이용해줍니다. behavior는 전환방식을 설정해줄 수 있는데 여기서는 'smooth'를 사용하여 부드럽게 이동하는 설정을 해줍니다.

- true : 요소의 상단 기준으로 스크롤 이동
- false : 요소의 하단 기준으로 스크롤 이동
- behavior : 전환 방식(애니메이션) 정의함 : auto || smooth
- block : 수직 정렬 : strat || center || end || nearest
- inline : 수평 정렬 : strat || center || end || nearest

✔ Math.floor()

소수점 이하를 버림하는 메서드입니다. 참고로 음수(-)는 편하게 생각하면 소숫점앞자리 숫자에서 -1을 하세요.(이해못하는 문과는 외웁니다...)

- 내 멋대로 원리 이해하기 (믿거나 말거나)
5.5라는 숫자에서 소숫점이하를 버림하면 5가 반환이됩니다. 여기까지는 이해가 쉬운데요. 소숫점이하를 버리게되면 반환되는 값는 원래 값보다 작아지잖아요? 그래서 음수의 경우도 반환되는 숫잔 원래 숫자보다 작아지게 되는거죠. 그래서 -3.4라는 숫자가 버림을 받게 되면 -3이아니라 -3.4보다 작은 -4가 반환되는 겁니다.

✔ getElementById

이 메서드는 주어진 문자열과 일치하는 ID를 가진 요소를 찾습니다. 여기서는 "section[i]"를 찾겠군요!

■ 코드 내멋대로 풀어헤치기👕

js코드를 보며 같이 봐주세요. 위에서부터 순서대로 기재했습니다.

1. scrollTop에 스크롤의 현재위치값을 저장합니다.

2. 조건(스크롤위치값 >= 요소의 Y값 - 전체 Y값/2 )에 부합하면 각 섹션의 .active를 제거하고 해당하는 섹션에만 .active를 부여합니다.

3. 현재 스크롤 위치값을 소숫자리를 버림하여 ".scroll span"에 입력합니다.

4. 각 섹션의 offsetTop값을 getElementById메서드를 이용해서 입력합니다.

5. 메뉴버튼을 클릭하면 a태그의 기본기능을 중지시킵니다.

6. a태그의 href값을 가져와서 해당하는 href값으로 부드럽게 이동시킵니다.