簡単にスクロールアニメーションを実装できるライブラリ【AOS】を紹介【JavaScriptの知識がなくてもOK!】

JavaScript
スポンサーリンク

今回は先日iSaraというLPの模写をしたときに、AOSという簡単にスクロールアニメーションを実装できるライブラリを使用したので、そのことについて、備忘録も兼ねてブログで共有したいと思います。

今回の備忘録はこんな方におすすめ!
  • JavaScriptの知識はないけど、サイトにスクロールアニメーションを実装したい!
  • fedeボタンを簡単に実装したい
マダラ蝶
マダラ蝶

このライブラリが使えるようになると爆速でスクロールアニメーションを作れるようになります。

スポンサーリンク

AOSってそもそもなに?

まず最初にAOSについて説明していきます。

AOSとは、正式名称をAnimation On Scroll libraryと言い、スクロール連動型アニメーションを簡単に実装することを目的につくられたJavaScriptのライブラリです。

スクロール連動型アニメーションとは、スクロールと連動し、対象要素がウィンドウ内に入ったタイミングで、アニメーション表示させるものです。
AOSの公式サイトに使用例がたくさん掲載されているので見てみるといいかと思います。

また、こちらのGit Hubのページにはドキュメントや詳しい使い方などが記されています。

見てみるとインターネットをよく利用される方ならよく見たことがあるアニメーションが多く乗っていると思います。

これらのアニメーションを1から実装することは可能ですが、少しばかり時間がかかってしまいますし、何より手間になります。そして、「車輪の再発明」という言葉がある通り、すでに存在する技術や解決法を知らずに、同じものを再び一から作ることは時間の無駄です。

AOSはファイルを読み込み、JavaScript数行と、HTML要素にクラスを指定するだけで、スクロールアニメーションを実装することができます。また、軽量であるため、パフォーマンスの観点からも優秀なライブラリなのです。

AOSの導入手順

ここまで読んでいただいた方、ありがとうございます。
おまたせしました。ここからは具体的な導入方法について説明していきます。

基本的な導入の手順はこの3つです。

  1. headタグ内に専用のリンクを記述
  2. bodyの閉じタグの前に専用のscriptタグを記述
  3. JavaScriptを1行だけ記述

たったこれだけでAOS.jsの使用準備完了です!簡単ですよね!
次にこれらの内容を細かく見ていきましょう!

※今回はCDNを利用した導入方法になります。

headタグ内に専用のリンクを記述

<head></head>内にスタイルのリンクタグを記述しましょう。

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

この1行を追加すれば大丈夫です!

bodyの閉じタグの前に専用のscriptタグを記述

</body>の前にscriptタグを記述しましょう。

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

できましたか?

JavaScriptを1行だけ記述

最後にJavaScriptを1行だけ追加しましょう。これによりAOSを初期化することができます。

<script>
  AOS.init();
</script>

これで準備OKです。

実際にアニメーションを設定しよう

次は実際にAOSの使い方を見ていきましょう!

アニメーションさせたいHTML要素に「data-aos属性」を指定する

アニメーションをさせたいHTML要素にdata-aos="◯◯"を指定しましょう。

<div data-aos="fade-in"></div>

このように◯◯の部分にアニメーションタイプを指定することで思い通りのスクロールアニメーションを実装することが出来ます。

上記のコードではフェードインのアニメーションを指定しています。

アニメーションの発火のためのankerを設定しよう

この要素にきたらアニメーションを実行させたいというときには発火させたい位置のHTML要素にid属性をしていして、アニメーションをさせたいHTML要素にdata-aos-anchor=".指定したid属性"を指定することで任意の位置でアニメーションを発火させることが出来ます。

僕が模写したサイトでもankerをしていています!

アニメーションの詳細な設定をしよう

アニメーションには詳細なオプションをclass属性を指定することで設定することが出来ます。

細かい内容は個々では割愛しますが、こちらに詳しく書かれている記事を見つけたのでリンクを張っておきます。

また、冒頭にも紹介した公式サイトGit Hubにも記入されています。

まとめ

今回は、スクロールアニメーションを爆速で実装することができるライブラリであるAOSを紹介しました。毎回1からJavaScriptを書いて実装している方や、JavaScriptの知識がないけどスクロールアニメーションを実装したいという方は使用してみるといいと思います。

コメント

タイトルとURLをコピーしました