LoginSignup
179

More than 5 years have passed since last update.

Animate.cssとwow.jsを使ってサイトにアニメーションをつける

Last updated at Posted at 2015-10-19

初めに

Animate.cssとwow.jsを使って自身のサイト(tiwuofficial.github.io)にアニメーションをつけてみたので、使い方を簡単に書いていきたいと思います。
tiwuofficial.github.io
次回記事
Font-Awesomeを使ってサイトにアイコンを表示させる + Animate.css + wow.js

1.準備

Animate.css

Animate.cssは要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートです。

公式サイトではアニメーションの動きの確認ができます。
公式サイトからanimate.cssファイルをダウンロードしてください。
(animate.min.cssでも可)

wow.js

wow.jsはアニメーションのトリガー、アニメーションの詳細な動きを設定できるJavaScirptです。

GitHubからwow.jsファイルをダウンロードしてください。
(wow.min.jsでも可)

2.使い方

ファイルの読み込み

animate.cssとwow.jsを読み込みます。

<link rel="stylesheet" href="animate.css">
<script src="wow.js"></script>

href,srcのパスはよしなに変更してください。
wow.jsはinit()メソッドを呼ぶ必要があります。

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

利用方法

要素のclassに"wow アニメーション名"を指定することでスクロールが要素に達した時
指定したアニメーションが実行されます。

<div class="wow fadeIn"></div>

上記例ではスクロールが要素に達した時、フェードインされて要素内のコンテンツが表示されます。
アニメーションはAnimate.cssの公式サイトで確認できます。
公式サイトのセレクトボックス内のアニメーション名をクラスに指定することでアニメーションを実現できます。

wow.jsのオプション

次にwow.jsのオプションを利用しアニメーションの詳細を変更します。

オプション 意味
data-wow-duration アニメーションの時間
data-wow-delay スクロールが要素に達してからアニメーションがスタートする時間
data-wow-offset スクロールが要素に達してからアニメーションがスタートする距離
data-wow-iteration アニメーションの繰り返し回数

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

上記例の1行目では、スクロールが要素に達してから5秒後に2秒かけてアニメーションを実行します。
2行目では、スクロールが要素に達してからスクロール10を過ぎたらアニメーションを10回実行します。

最後に

Animata.cssとwow.jsの使い方をまとめてみました。
簡単でとても使いやすいと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
179