728x90

Barba.js

: 웹사이트 페이지 간에 유연하고 매끄러운 전환을 만드는 데 사용하는 라이브러리

 

장점 : SPA(단일 페이지 애플케이션)처럼 실행하고 페이지 간 지연을 줄이는 효과

단점 : barba.js를 사용해서 작업할 빠에는 react로 작업을 하는 추세라 많이 쓰이지 않는듯하다.

 

 

# 설치

# npm
npm install @barba/core

# yarn
yarn add @barba/core

 

CDN

<!-- unpkg -->
<script src="https://unpkg.com/@barba/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>

 

DOM 구조

< body  data-barba = "wrapper" > 
<!--   <header>나 <nav>처럼 페이지 간에 변경되지 않는 콘텐츠를 여기에 넣으세요 -->
  

  < main  data-barba = "container"  data-barba-namespace = "home" > 
  <!-- 여기에 페이지 간에 변경하고자 하는 콘텐츠를 넣으세요. 
       예: 메인 콘텐츠 <h1> 또는 <p> --> 
  </ main >
    
  
  <!-- <footer>와 같이 페이지 간에 변경되지 않는 콘텐츠를 여기에 넣으세요 --> 
</ body >

 

# Wrapper

모든 페이지 구조와 Barba 컨테이너를 포함하는 주요 Barba 섹션

# Container

페이지 사이를 탐색할 때 콘텐츠가 자동으로 업데이트되는 섹션을 정의

# Namespace

각 페이지에 대해 고유한 이름을 정의

 

Hocks

1 beforeOnce 한 번 전환 되기 전 (브라우저가 처음 로드됨) x  
2 once 현재 페이지 한 번 전환 (브라우저 첫 번째 로드) x  
3 afterOnce 한 번 전환 후 (브라우저 첫 로드) x  
4 before 모든 것보다 먼저 x  
5 beforeLeave 떠나기 전 전환/보기 x x
6 leave 현재 페이지 떠나기 전환 x  
7 afterLeave 전환/뷰를 떠난 후 (다음 컨테이너는 DOM 준비가 됨 ) x x
8 beforeEnter 전환/보기를 입력하기 전에 x x
9 enter 다음 페이지 전환을 입력하세요 x  
10 afterEnter 전환/보기를 입력한 후 x x
11 after 모든 것 이후에 x

 

 

barba.js

Create badass, fluid and smooth transition between your website's pages.

barba.js.org

 

 

barba.js 라이브러리를 사용하여 페이지 전환 애니메이션

- leave 메서드에서는 pageTransition 애니메이션을 실행하고, 1초의 지연을 준 후 완료합니다.

- enter 및 once 메서드에서는 contentAnimation 애니메이션을 실행합니다.

 

Html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>GSAP</title>
        <link rel="stylesheet" href="css/main.css">
    </head>

    <!-- wrapper -->
    <body data-barba="wrapper">
        <div class="transition"></div>

        <div class="wrapper">
            <div class="nav">
                <a href="index.html">HOME</a>
                <a href="gsap.html">GSAP</a>
                <a href="effect.html">EFFECT</a>
            </div>
            <!-- container -->
            <main data-barba="container" data-barba-namespace="home" class="container">
                <div class="header">
                    <h1>GSAP</h1>
                    <div class="header_revealer"></div>
                </div>
                <div class="footer">(02)</div>
            </main>
            
         </div>
         <!-- 플러그인 연결 -->
         <script src="https://unpkg.com/@barba/core"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

 

Css(scss)

*{margin: 0; padding: 0; font-family: "SebangGothic", sans-serif; font-weight: 400; letter-spacing: -0.05rem; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none;}
img{display: block; max-width: 100%;}

body{   width: 100%; height: 100vh; background-color: #0f0f0f;
    .transition{ position: absolute; z-index: 100; width: 100%; height: 100vh; top: 0; left: 0; pointer-events: none; background-color: #fff; -webkit-transform: scaleY(0); transform: scaleY(0);
        
    }
    .wrapper{width: 100%; height: 100%;
        .nav{width: 100%; display: flex; justify-content: center; gap: 5rem; padding: 2rem 2.5rem; border-bottom: 1px solid #eee;
            a{color: #fff; font-size: 30px; cursor: pointer;}
        }
    }
    .container{padding: 2rem;
        .header{position: relative; width: max-content; height: max-content;
            h1{position: relative; top: 120px; line-height: 1; font-size: 120px; font-weight: 400;  color: #fff;}
            .header_revealer{position: absolute; top: 0; width: 100%; height: 100%;
                &::after{ content: ""; position: absolute; top: 120px; left: 0; width: 110%; height: 110%; background-color: #0f0f0f;}
            }
        }
    }
  }

 

 

Js

delay 함수

이 함수는 주어진 시간 동안 지연을 생성합니다.

function delay(n) {
    n = n || 2000;
    return new Promise((done) => {
        setTimeout(() => {
            done();
        }, n);
    });
}

 

  • n = n || 2000; : n이 주어지지 않으면 기본값으로 2000 밀리초 (2초)가 설정됩니다.
  • return new Promise((done) => { ... }); : 새로운 Promise 객체를 반환합니다.
  • setTimeout(() => { done(); }, n); : n 밀리초 후에 done()을 호출하여 Promise를 이행합니다.

 

barba.init 함수

barba.js 라이브러리를 초기화하고 페이지 전환 애니메이션을 설정합니다.

barba.init({
    sync: true,
    transitions: [
        {
            async leave(data) {
                const done = this.async();
                pageTransition();
                await delay(1000);
                done();
            },

            async enter(data) {
                contentAnimation();
            },

            async once(data) {
                contentAnimation();
            }
        },
    ],
});

 

설정 및 옵션

- sync: true: 페이지 전환 애니메이션을 동기화 모드로 설정합니다.

transitions 배열

페이지 전환 시 실행될 애니메이션을 정의하는 객체들이 들어갑니다.

 

 

leave 메서드

async leave(data) {
    const done = this.async();
    pageTransition();
    await delay(1000);
    done();
}

 

  • 페이지를 떠날 때 실행됩니다. (leave)
  • const done = this.async(); : 비동기 작업을 시작할 때 호출합니다.
  • pageTransition(); : 페이지 전환 애니메이션을 실행합니다.
  • await delay(1000); : 1초 동안 지연을 줍니다.
  • done(); : 비동기 작업이 완료되었음을 알립니다.

 

enter, once 메서드

async enter(data) {
    contentAnimation();
}

async once(data) {
    contentAnimation();
}
  • 새 페이지에 진입할 때 실행됩니다. (enter)
  • 페이지가 처음 로드될 때 한 번 실행됩니다. (once)

 

전체코드

function pageTransition() {
    /*  흰색배경 아래에서 위로 올라가는 효과 */
    const tl = gsap.timeline();
    tl.to(".transition", {duration: 1, scaleY: 1, transformOrigin: "bottom", ease: "power4.inOut"})
       .to(".transition", {duration: 1, scaleY: 0, transformOrigin: "top", ease: "power4.out", delay: 0.5});
}

/*  페이지 타이틀 효과 */
function contentAnimation() {
    const t2 = gsap.timeline();
    t2.to("h1", {top: 0, duration: 1, ease: "power3.inOut", delay: 0.75});
}

/*  Promise.js */
function delay(n) {
    n = n || 2000;
    return new Promise((done) => {
        setTimeout(() => {
            done();
        }, n);
    });
}

barba.init({
    sync: true,
    transitions: [
        {
           async leave(data) {
                const done = this.async();
                pageTransition();
                await delay(1000);
                done();
           },

            async enter(data) {
                contentAnimation();
            },

            async once(data) {
                contentAnimation();
            }
        },
    ],
});
728x90

'GSAP' 카테고리의 다른 글

[GSAP] 상하좌우 슬라이드(PIN)  (0) 2024.07.05
[GSAP] 개념/메서드 정리  (0) 2024.06.27

티스토리툴바