Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

htmlcssアイコン画像

Web

オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

 

どうもこんにちは。

今回はweb制作で使えるスクロールアニメーションの紹介をしていきたいと思います。

みなさんはWebサイトに動きをつける時、どうしていますか?

Animate.css」 と「wow.js」を組み合わせて使うことでお手軽かつシンプルにWebサイトに動きをビュンビュンつけることができます。

ええ、そりゃあもうビュンビュンに。

なぜ、このふたつを使うのか、それぞれの役割を簡単に説明します。

Animate.css
文字通りWebサイトにアニメーションをつけることができるcssファイル。Animate.cssはWebサイトが読み込まれた瞬間に発動してしまうので、一般的にwow.jsと組み合わせて使う。
wow.js
Webサイトのスクロール位置を知ることができる。wow.jsを使うことで、好きなタイミングでAnimate.cssを呼ぶことができる。スクロールが行われてからアニメーションさせるため必要。

という感じです。

では、さっそくAnimate.csswow.jsの導入方法&使い方を見ていきましょう。

Animate.cssの導入・使い方

animate.cssの画像

まずは「Animate.css」を導入しましょう。

Animate.cssのtopページがこちらの画面。

topページから少し下にスクロールすると、、、、、

いました!

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

↑こちらをコピーし、自身のhtmlのhead内にペーストして読み込ませればOKです!
(こちらからのコピペでもOKですが、バージョンが更新されると使用できなくなりますので「Animate.css」からのコピペが確実です)

Animate.cssを読み込めたら、クラスを追加するだけでアニメーションが機能します。

<h1 class="animate__animated animate__fadeIn">h1がフェードインします</h1>

class名にanimate__animated」と「animate__fadeIn」という2つのクラスを付けていますが、これも単純です↓

1.「animate__animated」は必須!つけましょう!(つけないと機能しないものだと理解しましょう。)
2.「animate__〇〇」は公式サイトから使いたいアニメーションのクラス名をコピーすればOK(下の画像参照)

animate.cssの画像

右側にアニメーションの動き一覧があります。(おおよそ100種類ほど。)

クリックすると中央のAnimate.cssの単語が動きますので気に入ったアニメーションを探しましょう。

お気に入りのアニメーションが見つけられたら、コピーしてご自身のhtmlのclass名に付け加えてあげると動き出します。

wow.jsの導入・使い方

wow.jsの画像

可愛らしいイッヌさんです。

Animate.css」だけでアニメーションを付けられたのですが、これだけではページを読み込んだタイミングで発動してしまいます

サイトのアニメーションは「スクロールされ可視範囲に入ったら発動する」のが一般的です。

なので、スクロールに連動してアニメーションが機能するようにwow.jsを導入していきましょう。

では早速「wow.js」の読み込みです。

wow.jsの画像

まずはtopページ上にあります。赤丸で囲みました「GITHUB」をクリック。

git.hub画像

GITHUB」ページに飛びまして、次に赤丸で囲みました「Code」をクリック。

ダウンロード画像

赤丸で囲まれた箇所をクリックしZIPファイルをダウンロードしましょう。

フォルダの画像

ダウンロードできました。

フォルダ内の画像

ダウンロードしたZIPファイルを展開して「wow.min.js」をご自身で使用するフォルダに移動させましょう。(wow.min.js以外は特に使いません)

移動させたら、headタグ内もしくは</body>直前で読み込みます↓(パスは自分のフォルダ構造にあわせて変更してください)

<script src="js/wow.min.js"></script>

その下に「wow.jsを有効化するための記述」も書いておきます。(コレがないと機能しません!つけましょう!)
</body>直前がオススメ!

<script>
new WOW().init();
</script>

最後にアニメーションさせる要素に「wow」というclassを付ければ完成です!(コレがないと機能しません!つけましょう!)

wow animate__animated animate__fadeIn"

素晴らしい。これだけであなたのwebサイトは華やかになる事間違いなしです。

アニメーションをカスタマイズ


「アニメーション要素が可視範囲に入ったら動く」
という設定ができました。

これだけでも十分に華やかにになりますが、もう少しカスタマイズしてみましょう。

「wow.js」が用意してくれている4つのdata属性を使っていきます↓

data-wow-duration:アニメーションにかける時間を指定
→ 速くor ゆっくり動かすことが可能に
data-wow-delay:可視範囲にはいってから発動するまでの時間を指定
→ 横並びの要素を左から順に動かすことが可能に
data-wow-offset:可視範囲に入っても発動せず、さらに何pxスクロールされたら発動するかを指定
→ 画面の真ん中で動かしたりが可能に
data-wow-iteration:アニメーションの繰り返し回数を指定
→ 何度もアニメーションさせることが可能に

<h2 class="wow animate__animated animate__fadeIn" data-wow-duration="5s">ゆっくり5秒かけてアニメーション</h2>
<h2 class="wow animate__animated animate__fadeIn" data-wow-delay=".7s">可視範囲に入って0.7秒後にアニメーション開始</h2>
<h2 class="wow animate__animated animate__fadeIn" data-wow-offset="200">可視範囲からさらに200pxスクロールされたらアニメーション</h2>
<h2 class="wow animate__animated animate__fadeIn" data-wow-iteration="3">アニメーションを3回繰り返す</h2>

おぉぉぉ。素晴らしい。

これであなたのwebサイトも思うがままです。

皆さんも是非一度「Animate.css」 と「wow.js」を駆使し、ご自身のwebサイトに遊びを取り入れてみて下さい。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  2. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  3. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  4. Web

    Flexboxで横並びを簡単に!

    皆さんは横並びのメニューなどのコーディングの際にflotタグ使っていま…

人気の記事

  1. 描画モードについて

    Photoshop

    Photoshopの描画モードについて〜前編〜
  2. Illustrator

    シンボル化してみよう
  3. 寸法線の作りかた

    Illustrator

    これは便利!!文字入力できる寸法線の作り方
  4. Illustrator

    Drawing Straight Lines with the Pencil T…
  5. Photoshop

    Create 3D Text with Photoshop Layer Styl…
PAGE TOP