페이지 전환 효과(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 .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입니다.
