【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でインスタグラムのようなフィルターを再現できる「Instagram.css」
  • ページをめくるようなエフェクトを実装できる「Page Flip Layout」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
  • CSSアニメーション制作に役立つライブラリ・ツール14選
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
RELATED POSTS
  • 【jQuery】Google画像検索結果風のUI「Thumbnail Grid with Expanding Preview」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • スクロール連動のエフェクトを実装できるライブラリ「AOS」
  • 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
  • YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
RECENT POSTS
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】 無料で使えるフリー動画素材サイト10選
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法