簡単にアニメーションができる!animate css


デザイン 2016年6月6日 200
animate cssで簡単にアニメーションをサイトに実装しよう。

サイトにアニメーション的な動きを入れるのは何かと手間がかかるのですが、animate cssを使うと簡単にアニメーションが実装できるのです。

僕はサイトを構築する際にはたいていの場合、animate cssは使います。

まずは使い方を説明します。

animate cssのサイトに移動します。

https://daneden.github.io/animate.css/

ページの下の方にあるDownload Animate.css をクリックしてcssファイルをダウンロードするかgithubのリンクをコピーしましょう。

ダウンロードしたcssファイルを適用さえたいサイトにFTPでアップロードさせます。<head>タグ内にcssの読み込みを記述します。

<link rel="stylesheet" href="http:/xxxxx.com/css/animate.css">

Animate.cssだけでは、ページを開いたときにアニメーションが開始されてしまうので、画面に映ったタイミングでアニメーションを開始させるなどの設定ができるwow.jsもダウンロードしましょう。

https://github.com/matthieua/WOW

ダウンロードしたwow.jsもftpでサーバーにファイルをアップロードし、読み込み先を<head>タグ内に記載します。

<script src="http:/xxxxx.com/js/wow.js"></script>

wow.jsはinit()メソッドを呼ぶ必要があるので、その記述もします。

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

使い方

要素のclass名にアニメーションのクラスとwowを記載します。

bounce!!
 <div class="animated bounce wow">bounce!!</div>
fadeIn
 <div class="animated fadeIn wow"> </div>

Facebook