【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」

 
animate.cssと併用して様々なアニメーションをつけられる「AniJS」。マウスイベントだけでなく、スクロール・ロードでも使えるのでいろんなケースで活躍しそうです。AniJSのサイトではデモも豊富にあるのでご覧いただきたい。

AniJS

Githubからファイル一式をダウンロードしてください。

使い方は「anijs-min.jsr」を</body>の前に「animate.css」を<head>内に記述します。

Java File
・
・
・
<script src="anijs-min.js"></script>
</body>
html
<head>
<link rel="stylesheet" href="http://anijs.github.io/lib/animationcss/animate.css">
</head>

アニメーションは要素のタグにdata-anijsを設定するだけで様々なアニメーションを実装できます。

if クリック・スクロールなどのイベント
on 対象となる要素
do アニメーションの種類
to 追加する要素

ifのイベントについてはEvent referenceのイベントに対応しているようです。
doのアニメーションの種類についてはanimate.cssをどうぞ。

サンプルは↓な感じ。

html
<body>
<header data-anijs="if: click, do: flipInY animated">
        header (Click here)
</header>
<div id="main" data-anijs="if: mouseover, do: swing animated">
        Main (MouseOver)
</div>
<footer data-anijs="if:click, do: hinge animated, to: #main">
        footer (Click here)
</footer>
<script src="anijs-min.js"></script>
</body>


  • ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
RELATED POSTS
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • 【jQuery】サイドバーをスライドで表示できるSimple Sidebar
  • 【html】文字実体参照を一覧できる「html arrows」
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
  • Webサイト・スマホアプリなどのUIデザインギャラリー「UIPatternHub」
  • ビューポートなどで要素の可視性を検出できる「Emergence.js」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで作成する吹き出しとデザインのアイデア
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア