【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>


RELATED POSTS
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • 入力フォームを実装するためのテンプレート「Boilerform」
PICKUP
POPULAR POSTS
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • 長いURLを短くするオススメの短縮URLサービス
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • 無料で使えるおしゃれな英語の筆記体フリーフォントまとめ
RECENT POSTS
  • イメージワードを選択するだけでフリーフォントを簡単に検索できる「モジザイ」
  • アイコンフォント「FontAwesome」の使い方
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年10月版】
  • プライス・値段表示などに使えそうな英数字フォント13選
TAG LIST
  • Webサービス

    87

  • CSS

    58

  • 素材

    34

  • jQuery

    34

  • エフェクト

    31

  • フリー

    28

  • ジェネレーター

    26