[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It

Post on:2014年7月2日

ページがロードされた時、ビューポートに要素が表示された時に、指定した要素をさまざまなCSS3アニメーションで表示するjQueryのプラグインを紹介します。

外部ファイルをセットして、あとは要素にclassを加えるだけの簡単実装です！

サイトのキャプチャ

CSS3 Animate It
CSS3 Animate It -GitHub

CSS3 Animate Itのデモ

ページ自体がデモになっており、さまざまなアニメーションが楽しめます。
下記ページで、ゆっくりスクロールしてお楽しみください。

サイトのキャプチャ

CSS3 Animate It

利用できるアニメーションの一覧ページもあります。

サイトのキャプチャ

Animation List

スライド、バウンド、フェード、回転、拡大、シェイク、スイング、フリップ、パルスなど、さまざまなアニメーションが簡単に利用できます。

サイトのキャプチャ

アニメーションの一覧

CSS3 Animate Itの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/animations.css" type="text/css">
</head>
<body>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src='js/css3-animate-it.js'></script>
</body>

Step 2: HTML

HTMLはまずは、通常通りに各エレメントを配置します。

<div>
  <h2>見出し</h2>
</div>

親要素に「.animatedParent」を与えて、子要素にアニメーションのエフェクトを定義します。
例：見出しをバウンドのアニメーションで表示

<div class='animatedParent'>
  <h2 class='animated bounceInDown'>見出し</h2>
</div>

アニメーションのエフェクトやタイミング、位置調整などは、全てclassで設定できます。
アニメーションの一覧は、下記ページをご覧ください。

sponsors

top of page

©2024 coliss