페이지 전환 효과 사용하기

페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.
그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다.

Javascript

function isSameAsLocation(uriString) {
    const uri = new URL(uriString);

    return (
        uri.origin === window.location.origin &&
        uri.pathname === window.location.pathname
    );
}

function pageTransition(nodeList) {
    nodeList.forEach((node) => {
        if (!(node instanceof HTMLAnchorElement)) return;

        const { href } = node;

        if (!href || node.target === "_blank" || isSameAsLocation(href)) return;

        node.addEventListener("click", (event) => {
            event.preventDefault();

            document.body.addEventListener(
                "transitionend",
                () => {
                    window.location.href = href;
                },
                { passive: true, once: true }
            );
            document.body.classList.add("hidden");
        });
    });
}

페이지에 있는 모든 a 태그를 클릭하면 위 함수가 작동하도록 할 겁니다.

자바스립트로 특수한 이벤트를 넣어둔 a 태그들은 위 함수의 조건문에서 걸러지도록 해주세요.
a.id !== “ID”
!a.classList.contains(“class”)
위 두 조건을 활용하시면 됩니다.

location.href로 uri를 변경했는데, hash만 변경되면 페이지를 새로 불러오지 않습니다.
근데 또 아예 똑같은 uri면 새로 불러옵니다.
그래서 현재 보고 있는 페이지에서 hash만 바뀔 때만 스크립트가 작동하지 않도록 해뒀습니다.

pageTransition(document.querySelectorAll("a"));

일단 위 스크립트처럼 페이지에 있는 모든 a 태그에 클릭 이벤트를 추가해주시고, 자바스크립트 등으로 페이지에 요소가 추가될 때마다 이벤트를 해당 요소에 추가해주셔야 합니다.

document.body.classList.add("reveal");

페이지가 로딩됐을 때 애니메이션을 표시할 수 있도록 웹사이트의 메인 자바스크립트 파일 제일 아래에 위 코드를 추가해주세요.

전 그냥 메인 자바스크립트파일 제일 아래에만 추가해뒀는데, window.addEventListener(“load”), document.addEventListener(“DOMContentLoaded”) 등을 이용해 특정 상황에 class를 추가하셔도 됩니다.

페이드 인 / 아웃 - CSS

body {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.65s 0.15s;
}

body.reveal {
    opacity: 1;
    overflow-y: auto;
}

body.hidden {
    opacity: 0;
}

위 영상에도 나오는 제일 만만한 페이드 인 / 아웃입니다.
제일 만만하게 사용하실 수 있고, 효과 자체도 무난하니 괜찮습니다.

기타 효과 사용하기