페이지 전환 효과 사용하기

Tips · 0 ·

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

Javascript

function pageTransition(nodeList) {
    nodeList.forEach(a => {
        const href = a.getAttribute("href");
        const hash = a.hash || "tmp";

        href && href[0!== "#" && a.target !== "_blank" && a.href !== `${location.protocol}//${location.hostname}${location.pathname}${hash}` && (
            a.addEventListener("click"e => {
                e.preventDefault(),
    
                setTimeout(() => {
                    body.classList.contains("hidden"&& (
                        location.href = href
                    )
                }, 800),
                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 .65s .15s
}

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

body.hidden {
    opacity: 0
}

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

기타 효과 사용하기

간단하게 만들어본 효과입니다.
딱히 뭐라 명명해야 할 진 모르겠네요.

<div id="loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

전 8개의 div를 넣어뒀습니다.
본인이 원하는 만큼 늘리거나 줄이시면 됩니다.

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  
    &>div {
      width: 100%;
      height: 12.5%;
      background: blueviolet;
      transition: transform 500ms;
    }
  
    @for $i from 1 through 8 { 
        &>div:nth-child(#{$i}) {
            transition-delay: $i * 100ms;
        }
    }
}

body:not(.hidden).reveal #loader>div {
    transform: translateX(-100%)
}

:nth-child(1) 부터 (8)까지 적기 귀찮아서 Sass(SCSS)를 사용해 루프 돌렸습니다.
div 개수 수정하시면 위 코드 수정하시고 온라인 컴파일러를 사용하시거나, 아래에 컴파일된 CSS를 수정해주세요.

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#loader>div {
    width: 100%;
    height: 12.5%;
    background: blueviolet;
    transition: transform 500ms;
}

#loader>div:nth-child(1) {
    transition-delay: 100ms;
}

#loader>div:nth-child(2) {
    transition-delay: 200ms;
}

#loader>div:nth-child(3) {
    transition-delay: 300ms;
}

#loader>div:nth-child(4) {
    transition-delay: 400ms;
}

#loader>div:nth-child(5) {
    transition-delay: 500ms;
}

#loader>div:nth-child(6) {
    transition-delay: 600ms;
}

#loader>div:nth-child(7) {
    transition-delay: 700ms;
}

#loader>div:nth-child(8) {
    transition-delay: 800ms;
}

body:not(.hidden).reveal #loader>div {
    transform: translateX(-100%);
}

컴파일된 CSS입니다.

profile

이메일은 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
    카카오페이 qr코드 모바일이시라면 클릭