Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

初めに

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の使い方をまとめてみました。
簡単でとても使いやすいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした