ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

トップ > JavaScript > 【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」

JavaScript

jQuery不要で超簡単、スクロールに合わせてふわっと表示させられるAOS

サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。

ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。

 

こんな感じにふわっと表示

↑今回ご紹介するのはこの動きの実装方法です。

 

ただ単にアニメーションさせる方法としてはCSSでも可能ですが、スクロールに合わせてとなるとJavaScriptが必須です。

そこでJavaScriptに苦手意識がある人も簡単安心なプラグインでの導入を紹介したいと思います。

 

 

jQuery不要、超簡単ふわっと表示系JavaScriptプラグイン「AOS」

いくつか使用した事のあるプラグインの中で最近ちょうど使っている
「AOS (Animate On Scroll Library)」というjQuery不要のJavaScriptプラグインを解説します。

 

「AOS」CDNでの導入方法

使い方はとても簡単です。CDNでの導入方法なら一瞬です。

 

<head>タグ内でこちらのCSSを読み込んで

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

 

</body>タグ閉じる手前でこちらのスクリプトを読み込みます。

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

 

タグへ動き方を指定する

あとはふわっと表示させたい要素のタグ内に属性として「data-aos=" "」で動きの指定を記述します。以下はdivタグの場合。

シンプルその場でふわっとフェードイン
<div data-aos="fade"></div>

 

 

フェードイン系の動き
<div data-aos="fade-up"></div>

 

 

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

 

 

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

 

 

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

 

 

<div data-aos="fade-up-right"></div>

 

 

<div data-aos="fade-up-left"></div>

 

 

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

 

 

<div data-aos="fade-down-right"></div>

 

 

<div data-aos="fade-down-left"></div>

 

 

フリップ系の動き
<div data-aos="flip-left"></div>

 

 

<div data-aos="flip-right"></div>

 

 

<div data-aos="flip-up"></div>

 

 

<div data-aos="flip-down"></div>

 

 

ズームイン・アウト系の動き
<div data-aos="zoom-in"></div>

 

 

<div data-aos="zoom-in-up"></div>

 

 

<div data-aos="zoom-in-down"></div>

 

 

<div data-aos="zoom-in-left"></div>

 

 

<div data-aos="zoom-in-right"></div>

 

 

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

 

 

<div data-aos="zoom-in-up"></div>

 

 

<div data-aos="zoom-in-down"></div>

 

 

<div data-aos="zoom-in-left"></div>

 

 

<div data-aos="zoom-in-right"></div>

 

 

動き方以外のカスタマイズ

これまでのサンプルを見て頂くと動きがちょっと早かったりしますよね。

そのあたりも細かくカスタマイズ可能です。

方法としては動き方と同じように、動かしたいタグの属性にカスタマイズ用の属性を記述します。

  • 「data-aos-duration=" "」
    アニメーションの時間を設定。初期値は400。ミリ秒換算されます。
    50～3000まで50ミリ秒刻みで指定できます。
  • 「data-aos-easing=" "」
    動きの加減速具合、イージングの設定。初期値はease。
    他設定例「linear/ease-in/ease-out/ease-in-out/ease-out-quart」など
    参照⇒GitHub - michalsnik/aos: Animate on scroll library

  • 「data-aos-offset=" "」
    アニメーションを開始するスクロール位置の設定。初期値は120。ピクセル換算でスクロールが始まる位置をずらせます。
  • 「data-aos-delay=" "」
    アニメーションの遅延の設定。初期値は0。少し遅れてふわっと表示させられます。0～3000まで50ミリ秒刻みで指定できます。
  • 「data-aos-anchor=" "」
    アニメーション開始するスクロール位置を他の要素で設定できます。初期値はnullで設定されていません。
  • 「data-aos-anchor-placement=" "」
    アニメーション開始し始めるスクロールの位置を設定。初期値はtop-bottomで要素の上部が画面下部にきたらアニメーションし出します。
    他設定例「top-center/top-top/center-bottom/center-center/center-top/bottom-bottom/bottom-center/bottom-top」
  • 「data-aos-once=" "」
    アニメーションが1回だけ実行されるように設定。初期値はfalseで、何度もスクロールする度にふわっと表示されます。trueで一回だけになります。
  • 「data-aos-mirror=" "」
    下から上にスクロールする時にもアニメーションするかどうかの設定。初期値はtrueで、上下どちらでも動作します。falseにすると上から下のみになります。

 

ひとつひとつにこれらを指定してカスタマイズも出来ますし、BODY閉じタグ手前に記述したAOSの初期化のスクリプトで全体に適用させることも可能です。

<script>
AOS.init({
  offset: 120,
  delay: 0,
  duration: 400,
  easing: 'ease',
  once: false,
  mirror: false,
  anchorPlacement: 'top-bottom',
});
</script>

上のような記述で、属性の際につける「data-aos-」の部分は不要になります。

 

独自のアニメーションを設定する

さらにCSSで属性をセレクタにしてオリジナルの動き方や動き以外のカスタマイズも可能です。

オリジナルアニメーション例1
[data-aos="original"] {
    opacity: 0;
    transition-property: transform, opacity;
    transform: translate(20px, 20px);
    overflow: hidden;

    &.aos-animate {
        opacity: 1;
        transform: translate(0);
    }

    @media screen and (min-width: 768px) {
        transform: translateX(30px, 30px);

        &.aos-animate {
            transform: translateX(0);
        }
    }
}

上記の例では通常のCSSではなくSCSSで記述したものですがCSSでもオリジナルの動きは作成できます。

「opacity: 0」で元を透明に。
「transform: translate(20px, 20px);」で位置をずらして設定して、

「transition-property: transform, opacity;」でアニメーションされるように指定しています。

 

そして表示される際に「aos-animate」というクラスが付与されるのでその際に元の位置と透明度に戻すアニメーションになっています。

さらにメディアクエリを使ってスマホやタブレットで見た際の挙動も変更しています。

 

オリジナルアニメーション例2
body[data-aos-delay='4000'] [data-aos],
  [data-aos][data-aos][data-aos-delay='4000'] {
    transition-delay: 4000ms;
}

デフォルトでは遅延は3000ミリ秒までしか設定できません。それを4000ミリ秒で指定できるようにしたカスタム例です。

 

 

AOSはかなり使い勝手がいい

Animate On Scroll Libraryという名前の通り、スクロールに合わせてアニメーションさせたい時にはシンプルに使いやすく、カスタマイズもし易いライブラリなのではないかと思います。 

 

他にもScrollRevealやAnimate.css×Wow.js等も同様なプラグイン/ライブラリで、それぞれ使い方・特色も違うのでまた解説出来ればと思います。

 

是非参考にしていただければ幸いです。

 

michalsnik.github.io

 

 

 

 

webabc.hatenablog.jp

 

 

webabc.hatenablog.jp

 

 

webabc.hatenablog.jp