CSS3 Animate Itのご紹介です。
CSS3 Animate Itとは
コンテンツ要素にclassを指定するだけで、アニメーション表示を簡単に実装できるCSS3アニメーションライブラリーです。
- ・Javascriptで画面スクロールをトリガーにしています。
- ・jQueryが必要です。
See the Pen CSS3 Animate It *TEST* by Saki (@SAKI) on CodePen.
ダウンロード
CSS3 Animate It :
http://jackonthe.net/css3animateit/
アニメーションリスト、デモ :
http://jackonthe.net/css3animateit/examples/
※2018.2 追記 : CDNありました！
https://cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/css/animations.min.css
https://cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/css/animations-ie-fix.min.css …IE9以下用
https://cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/js/css3-animate-it.min.js
使い方
animations.css と css3-animate-it.js を読み込みます。
※jsの前に、jQueryライブラリをお忘れなく。
html<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/css/animations.min.css">
</head>
<body>
...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/js/css3-animate-it.min.js'></script>
</body>
</html>
※2018.2 変更 CDNに変更
※$(window).load(function ..... があるので、 jQuery 3 だとコンテンツロード時に動きません。
→indexOf is not a function エラーになります。
アニメーション
では、動かしてみます。
基本の形はこんな感じ。
code<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
動かす要素のclassに、"animated ***" を指定します。***はアニメーション名です、
アニメーション名のリストは、こちら。examples
その要素を animatedParent クラスで囲みます。
トリガーとなる画面表示のタイミングは、このanimatedParentクラスの要素がターゲットになります。
animatedクラスを指定した個々の要素ではないことにご注意を！
アニメーションスピード
デフォルト→クラス指定なし, Slow, Slower, Slowest の4段階あります。
code<div class='animatedParent'>
<div class='animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='slow animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='slower animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='slowest animated bounceInDown'>It Works!</div>
</div>
アニメーションの順序
各アニメーション要素の順序を指定できます。
1. 親要素(class='animatedParent')に、アニメーションスピード(data-sequence='xxxxx')を指定します。
2. 子要素(class='animated')に、順序(data-id='1' etc.)を指定します。
code<div class='animatedParent' data-sequence='1000'>
<div class='animated growIn' data-id='1'>Text ID=1</div>
<div class='animated bounceInRight' data-id='2'>Text ID=2</div>
</div>
アニメーション オフセット
animatedParent要素を起点としてアニメーション開始位置のオフセットを指定できます。
data-appear-top-offset='-300' とすると、animatedParentの最初の位置から300pxを超えてスクロール、かつ、表示されるとアニメーションが始まります。
code<div class='animatedParent' data-appear-top-offset='-300'>
<h2 class='animated bounceInDown'>It Works!</h2
</div>
1度だけアニメーション
画面スクロールで再度表示されるとデフォルトでは常時アニメーション表示されますが、最初の一度だけにする場合は、animateOnceクラスを指定します。
code<div class='animatedParent animateOnce'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
アニメーションDELAY (*NEW)
アニメーションを遅らせて動かすクラスは、次の11通り用意されています。
-
delay-250
delay-500
delay-750
delay-1000
delay-1250
delay-1500
delay-1750
delay-2000
delay-2500
delay-3000
delay-3500
code<div class='animatedParent'>
<div class='animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='delay-500 animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='delay-1000 animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='delay-1500 animated bounceInDown'>It Works!</div>
</div>
* * *
スクリプトを書かずにクラス指定だけでできますので、さくっと設置できてよい感じです。
以上！
