CSS 없는 CSS 애니메이션 - 일반 JS 및 React의 AOS

"CSS is beautiful but hard".

대부분의 개발자는 이 말에 동의할 수 있습니다. 사실 많은 백엔드 개발자들이 어려움 때문에 프론트엔드를 떠났습니다. CSS 애니메이션은 CSS에서 가장 어려운 부분 중 하나입니다. 좋은 소식이 있습니다.

개발자들은 필요한 것보다 너무 많은 CSS 작성을 거부할 수 있도록 라이브러리를 개발해 왔습니다. 굉장하다!!!

이 기사에서는 이러한 라이브러리 중 하나를 소개합니다. AOS (Animation on Scroll) 이라고 합니다.

AOS는 github의 무료 라이브러리로, 웹사이트 애니메이션을 도와줄 뿐만 아니라 웹사이트의 해당 부분으로 스크롤했을 때만 애니메이션이 실행되도록 합니다.

더 이상 이야기하지 않고 실전으로 갑시다. React 및 일반 JavaScript 프로젝트에서 사용하는 방법을 시연할 것입니다.

일반 자바스크립트

스타터 프로젝트

React 스타터 프로젝트 받기here

설정 및 초기화

index.html의 head 태그에 다음 CSS 링크를 추가합니다.

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

닫는 본문 태그 바로 앞에 다음 스크립트를 추가합니다.

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

scripts.js 파일에서 다음 코드를 추가하여 AOS를 초기화합니다.

AOS.init();

탐색 애니메이션

data-aos="fade-right" 섹션에 nav를 추가하여 다음과 같이 오른쪽에서 페이드 인되도록 합니다.

<!-- nav -->
    <nav class="navbar navbar-default" data-aos="fade-right">
      <div class="navbar-header">
        <h1>Navigation</h1>
      </div>
    </nav>

브라우저에서 확인하실 수 있습니다

AOS offers us other options like the normal CSS animation. So, let's improve the flow and slow it a little. Our nav now looks like this

<!-- nav -->
    <nav
      class="navbar navbar-default"
      data-aos="fade-right"
      data-aos-delay="50"
      data-aos-duration="1000"
      data-aos-easing="ease-in-out-cubic"
    >
      <div class="navbar-header">
        <h1>Navigation</h1>
      </div>
    </nav>

nav 애니메이션이 더 부드러워졌습니까? 그게 아름다움이야!

Now you get the point. Animate the other part of the web page as you desire

최종 일반 JS 코드

모든 코드는 here입니다.

웹 페이지가 활성 상태입니다here.

반응

스타터 프로젝트

React 스타터 프로젝트 받기here

설정 및 초기화

다음 코드를 사용하여 AOS를 설치합니다.

npm install aos --save

다음 코드를 사용하여 App.js 파일에서 AOS를 가져오고 초기화합니다.

import AOS from "aos";
import "aos/dist/aos.css";
AOS.init();

탐색 애니메이션

data-aos="flip-left" 섹션에 nav를 추가하여 다음과 같이 왼쪽으로 뒤집도록 합니다.

<!-- nav -->
    <nav className="navbar navbar-default" data-aos="flip-left">
        <div className="navbar-header">
          <h1>Navigation</h1>
        </div>
      </nav>

브라우저에서 확인하실 수 있습니다

AOS offers us other options like the normal CSS animation. So, let's improve the flow and slow it a little. Our nav now looks like this

<!-- nav -->
    <nav
        className="navbar navbar-default"
        data-aos="flip-left"
        data-aos-delay="50"
        data-aos-duration="2000"
        data-aos-easing="ease-in-out-cubic"
      >
        <div className="navbar-header">
          <h1>Navigation</h1>
        </div>
      </nav>

nav 애니메이션이 더 부드러워졌습니까? 그게 아름다움이야!

Now you get the point. Animate the other part of the web page as you desire

최종 반응 코드

모든 코드는 here입니다.

결론

AOS로 할 수 있는 일이 많습니다. 나는 당신이 그것을 가지고 놀고 어떤 결과를 얻는지 확인하는 것이 좋습니다.

질문이나 의견이 있으시면 댓글 섹션에 남겨주세요. 곧 봐요.