transit.jsを併用してアニメーションコンテンツを実装するjQuery依存のスクリプト・Nanimatorのご紹介です。CSS3ベースなので使いどころは限られますけど覚えておいて損は無いかも。
テキストや画像を使ってアニメーションコンテンツを手軽に実装する為のスクリプト。jQueryを必要とします。使いどころはスマフォサイト等のみになりそうですが、素敵なエフェクトを手軽に作れるのは良いかも。
Nanimator
動作サンプルです。カスタムデータ属性でそれぞれの要素のアニメーションのタイミングを調整しています。
<h1 class="adjectives nanimate" data-time='300' data-direction="left" data-distance='20' data-fade='true' data-duration='1400'>foobar</h1> |
↑ こんな感じ。
スクリプトは本体とtransit.jsとNanimatorを読み込んでセレクタを指定します。
ライセンスの明記はありませんが、ブログで使い方を解説されているので直接ライセンスを聞いてみるといいかと思います。
