GSAP 애니메이션을 사용한 Barbajs

14865 단어 webdevcssjavascript
나는 항상 간단한 웹 응용 프로그램이 페이지 간에 매끄럽고 매끄럽게 전환되고 단일 페이지 응용 프로그램(SPA)처럼 작동하기를 원했습니다. 그래서 저는 웹 사이트 페이지 간에 유동적이고 원활한 전환을 생성하는 점진적 향상 라이브러리인 Barbajs를 만났습니다.

Barba js는 또한 페이지 간의 지연을 줄이고 브라우저 HTTP 요청을 최소화하며 사용자의 웹 경험을 향상시키는 데 도움이 됩니다.

그래서 Barba js를 사용하는 간단한 랜딩 페이지를 만들고 페이지 전환 애니메이션을 위해 GSAP 애니메이션을 사용했습니다. 오늘은 barbajs와 GSAP 애니메이션을 통해 이 매끄러운 애니메이션을 만드는 방법을 설명하겠습니다.



그렇다면 GSAP란 무엇일까요? - 간단한 언어로 GSAP를 자바스크립트 애니메이션의 Swiss Army Knife로 생각하면 됩니다.. .하지만 더 좋습니다. JavaScript가 만질 수 있는 모든 것(CSS 속성, 캔버스 라이브러리 개체, SVG, React, Vue, 일반 개체 등)에 애니메이션을 적용하고 자동 GPU 가속을 포함하여 엄청난 속도(jQuery보다 최대 20배 빠름)로 수많은 브라우저 불일치를 해결합니다. 변환의.


시작하겠습니다.

Barbajs를 설치하십시오.



npm 사용:

npm install @barba/core


또는 실을 사용하여

yarn add @barba/core


또는 CDN 사용:

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



index.html 만들기




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BarbaJs Demo | Home</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body data-barba="wrapper">
        <div class="wrapper">
            <header>
                <nav>
                    <ul>
                        ...
                    </ul>
                </nav>
            </header>

            <main data-barba="container" data-barba-namespace="home">
                ...
            </main>
        </div>

        <script src="https://unpkg.com/@barba/core"></script>
    </body>
</html>


Barba js 코어 파일을 가져와서 Barba js 설명서에 따라 레이아웃을 구성해야 합니다. 모든 페이지 구조와 Barba 컨테이너를 포함하는 기본 섹션인 wrapper가 있음을 알 수 있습니다.

<body data-barba="wrapper">
...
</body


컨테이너는 페이지 사이를 이동할 때 콘텐츠가 자동으로 업데이트되는 섹션을 정의합니다. 그리고 각 페이지에 대해 고유한 이름을 정의할 수 있는 네임스페이스입니다. 주로 전환 규칙 및 보기에 사용됩니다.

<main data-barba="container" data-barba-namespace="home">
...
</main>


이것이 barbajs 의 초기화에 대한 전부입니다. 이제 GSAP를 통해 전환 부분을 추가할 수 있습니다. 먼저 전환 div를 초기화하겠습니다. 페이지 레이아웃이 index.html에서 about.html로 변경될 때 애니메이션 효과를 구현하는 .transition div를 만들었습니다.

<ul class="transition">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


CSS

.transition {
  position: absolute;
  z-index: 99;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.transition li {
  width: 20%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  background: #fffffe;
}


이제 index.js에서 GSAP를 통해 애니메이션을 적용합니다.

페이지 전환의 경우,

function pageTransition() {
    var tl = gsap.timeline();

    tl.to(".transition li", {
        duration: 0.5,
        scaleY: 1,
        transformOrigin: "bottom left",
        stagger: 0.2,
    });

    tl.to(".transition li", {
        duration: 0.5,
        scaleY: 0,
        transformOrigin: "bottom left",
        stagger: 0.1,
        delay: 0.1,
    });
}


제목 태그, 이미지 태그와 같은 콘텐츠에 대해 다른 기능을 만들어 보겠습니다.

function contentAnimation() {
    var tl = gsap.timeline();
    tl.from(".headline", {
        duration: 1.5,
        translateY: 50,
        opacity: 0,
    });

    tl.to(
        "img",
        {
            clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
        },
        "-=.1"
    );
}


이제 Barba js 수명 주기에 GSAP 애니메이션을 추가해 보겠습니다.

barba.init({
    sync: true,

    transitions: [
        {
            async leave(data) {
                const done = this.async();
                pageTransition();
                await delay(1500);
                done();
            },

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

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


여기서 지연 기능은 도우미입니다.

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



Barbajs용 후크



떠나고, 들어가고, 한 번은 갈고리이고 방법입니다. 공통this.async()을 사용하거나 약속을 반환하여 후크를 동기식 또는 비동기식으로 실행할 수 있습니다.
sync: true 를 사용하면 leave와 enter가 동시에 발생하므로 순서가 달라집니다. all before, then enter/leave, then all after.
barba.hooks를 사용하여 전역 후크를 정의하고 모든 전환에 적용할 수 있습니다.


암호



이제 모든 코드를 혼합한 후 GitHubhere에서 최종 코드를 가져와 애니메이션을 재생할 수 있습니다. 멋진 애니메이션을 만드시길 바랍니다.


결론



여기까지 오셔서 Barba js와 Barba js의 장점에 대한 기본적인 이해를 하셨기를 바랍니다. 프로젝트에서 시도해 보시고 즐기시기 바랍니다!

다음까지,
계속 해킹하세요, 건배
2.data5u 프록시 IP의 포트 암호화 해제 (2)
select 태그 설정 읽기 전용 방법 (드롭다운 상자는 선택할 수 없지만 전송 가능)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage