HTML, CSS 및 AOS.js를 사용하여 스크롤에 애니메이션 추가

AOS.js(Scroll Animation)는 애니메이션을 제공하는 JavaScript 라이브러리로, 필수 div 태그에서 클래스 이름을 변경하기만 하면 많은 수의 애니메이션을 더 쉽게 추가할 수 있습니다. 다양한 애니메이션 JavaScript 라이브러리가 있지만 AOS.js는 아마도 그 중 가장 단순할 것입니다.

이 튜토리얼에서는 다양한 예제를 통해 AOS.js에서 사용할 수 있는 다양한 유형의 애니메이션을 살펴보겠습니다.

우리가 살펴볼 첫 번째 애니메이션 유형은 페이드 애니메이션입니다. 그렇게 하기 전에 먼저 aos.css 및 aos.js가 코드에서 사용 가능하고 CDN 링크를 통해 얻을 수 있는지 확인해야 합니다.

HTML 코드의

태그 끝에 다음 코드 조각을 붙여넣기만 하면 됩니다. 으아아아

위의 코드 조각은 css 파일을 얻는 데 도움이 됩니다. js 파일을 얻으려면 아래 그림과 같이 CDN 조각의 HTML 코드에 body 태그를 붙여넣어야 합니다.

으아아아

위의 두 코드 조각을 HTML 코드에 추가한 후 코드에서 AOS를 사용할 수 있습니다.

AOS.js 페이드 애니메이션 사용

페이드 애니메이션은 페이드 인 및 페이드 아웃 동작을 시뮬레이션하며 총 8가지 애니메이션을 구현할 수 있습니다. 이것들은 -

• 페이드 인 및 페이드 아웃

• 페이드 인 및 페이드 아웃

• 왼쪽으로 페이드

• 페이드 오른쪽

• 왼쪽으로 페이드

• 페이드 오른쪽

• 왼쪽으로 페이드

• 왼쪽으로 페이드

이제 간단한 HTML-CSS 예제에서 하나씩 사용해 보겠습니다.

아래 코드 조각은 위의 모든 페이드 애니메이션을 변경하는 유일한 부분입니다.

으아아아

위 코드에서는 data-aos 속성에 "fade-up" 값을 전달하며, 모든 페이드 경우에는 이 값만 변경됩니다.

index.html

이제 "페이드 아웃" 애니메이션을 수행할 다음 index.html 파일을 살펴보겠습니다.

예

으아아아

위 코드를 브라우저에서 실행하면 "Something Up!"이라는 텍스트가 포함된 div가 페이드 애니메이션과 함께 위쪽으로 나타나는 것을 볼 수 있습니다.

마찬가지로 fade애니메이션을 수행하려면 아래 코드 조각에 표시된 것을 사용할 수 있습니다.

으아아아

페이드 애니메이션을 얻으려면 index.html 파일의 div를 위의 div로 바꾸기만 하면 됩니다.

fade left의 경우 코드 조각은 아래와 같습니다.

으아아아

fade의 경우 코드 조각은 아래와 같습니다.

으아아아

Fade-up-left의 경우 코드 조각은 아래와 같습니다.

으아아아

Fade-up-right의 경우 코드 조각은 아래와 같습니다.

으아아아

Fade Left의 경우 코드 조각은 아래와 같습니다.

으아아아

Fade-down-right의 경우 코드 조각은 아래와 같습니다.

으아아아

이쯤 되면 AOS의 페이드 애니메이션이 완성됐다고 결론 내릴 수 있습니다.

AOS.js 플립 애니메이션 사용

Flip 애니메이션은 뒤집기 동작을 시뮬레이션하며 총 4가지 애니메이션을 구현할 수 있습니다. 이것들은 -

• 위로 스크롤

• 아래로 스크롤

• 왼쪽으로 뒤집기

• 우회전

이제 간단한 HTML-CSS 예제에서 하나씩 사용해 보겠습니다.

index.html

"뒤집기" 애니메이션을 수행할 다음 index.html 파일을 고려해 보겠습니다.

으아아아

위 코드를 브라우저에서 실행하면 "Flip Up!"이라는 텍스트가 포함된 div가 표시됩니다. 위쪽 방향으로 뒤집기 애니메이션과 함께 나타납니다.

마찬가지로 플립다운 애니메이션을 만들고 싶다면 아래 코드 조각에 표시된 대로 사용할 수 있습니다.

으아아아

좌회전의 경우 코드 스니펫은 아래와 같습니다.

으아아아

오른쪽 뒤집기의 경우 코드 조각은 아래와 같습니다.

으아아아

AOS.js를 사용하여 애니메이션 크기 조정

줌 애니메이션은 줌 동작을 시뮬레이션하며 총 8가지 애니메이션을 구현할 수 있습니다. 이것들은 -

• 확대
• 확대
• 축소
• 왼쪽으로 확대
• 오른쪽으로 확대
• 축소
• 확대
• 축소
• 왼쪽으로 축소
• 오른쪽으로 확대

이제 간단한 HTML-CSS 예제에서 하나씩 사용해 보겠습니다.

index.html

"확대" 애니메이션을 수행할 다음 index.html 파일을 고려해 보겠습니다.

예

으아아아

위 코드를 브라우저에서 실행하면 확대/축소 애니메이션에서 텍스트 확대/축소가 위쪽을 가리키는 div가 표시됩니다.

마찬가지로 확대 애니메이션을 수행하려면 아래 코드 조각에 표시된 것을 사용할 수 있습니다.

으아아아

zoom-in의 경우 코드 조각은 아래와 같습니다.

으아아아

왼쪽으로 확대의 경우 코드 조각은 아래와 같습니다.

으아아아

오른쪽 확대의 경우 코드 조각은 아래와 같습니다.

<div id="main">
   <div data-aos="zoom-in-right">Zoom in right!</div>
</div>

同样，如果我们想要缩小动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="zoom-out">Zoom out!</div>
</div>

对于放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-up">Zoom out up!</div>
</div>

对于缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-down">Zoom out down!</div>
</div>

对于向左缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-left">Zoom out left!</div>
</div>

对于向右缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-right">Zoom out right!</div>
</div>

使用 AOS.js 进行多重设置动画

在上面的所有示例中，我们使用的是单个动画，没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑这样的情况：我们想要一个淡入淡出动画，但持续时间为某个时间。

在下面的代码片段中，我们将创建一个带有持续时间的淡入淡出动画。

<div id="main">
   <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div>
</div>

结论

在本教程中，我们演示了如何借助 AOS.js、HTML 和 CSS 创建滚动动画。

위 내용은 HTML, CSS 및 AOS.js를 사용하여 스크롤에 애니메이션 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!