[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS

Post on:2014年5月12日

スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。

jQueryなどの他のスクリプトは不要です。

サイトのキャプチャ

AniJS
AniJS -GitHub

AniJSのデモ

まずは、ページ自体がデモになっています。

サイトのキャプチャ

AniJS

ページを表示すると、風船が上がってきて、タイトルやボタンがぶらりと落ちます。

デモでは、かなり面白いアニメーションが実装されています。

サイトのキャプチャ

intro -AniJS

左の四角形をクリックすると、ページが回転します。
右のフォームの入力欄にフォーカスすると、下のテキストが震え、要素がぶらりと落ちます。

使い方はいろいろです。

サイトのキャプチャ

AniJS -CodePen

こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。

AniJSの使い方

Step 1: 外部ファイル

当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
</head>
<body>
  ...
  <script src="anijs-min.js"></script>
</body>

Step 2: HTML

アニメーションやトリガーは、HTMLに設定します。
基本となるのは、if, on, do, to の4つ。

if
トリガーとなるイベント（click, scroll など）
on（オプション）
対象となるエレメント（cssのセレクタなど）
do
実行するアニメーション
to（オプション）
追加する要素

これらの設定を「data-anijs」に記述します。
ヘッダをクリック（if）で、回転させる（do）時は、こんな感じになります。

<body>
  <header data-anijs="if: click, do: flipInY animated">
    <!-- ... -->
  </header>
</body>

要素自身をトリガーとしない場合は、onを使って要素を指定して実行します。
例：nav要素をスクロールしたら、ウインドウ全体がスイングする。

<nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
  nav
</nav>

ifに記述するイベントは、click, mouseouver, focus, drag, scroll など、DOMのさまざまなイベントに対応しています。
全イベントは下記ページを参考に。

doに記述するアニメーションは、animate.cssの全アニメーションに対応しています。

sponsors

top of page

©2024 coliss