transit.jsを併用してアニメーションコンテンツを実装するスクリプト・Nanimator

スポンサーリンク

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を読み込んでセレクタを指定します。

ライセンスの明記はありませんが、ブログで使い方を解説されているので直接ライセンスを聞いてみるといいかと思います。

Nanimator on github / Introducing Nanimator Library

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services