no-image

JavaScript

豊富なCSSアニメーションエフェクトを実装できる「effect.css」

effect.cssはAngular、React、jQuery、Bootstrap、QuantumUIのLESSで書かれたピュアCSSアニメーションエフェクトを実装することができます。かなり豊富な種類のアニメーションエフェクトが用意されています。

effect.css

デモ

デモでは、バウンス、フェード、フォール、フリップ、回転、スピードなどなど、たくさんの種類のアニメーションエフェクトを見ることができます。

バウンス1つとっても、.bounce、.bounce-in、.bounce-down、.bounce-up、.bounce-down-up、.bounce-up-down、.bounce-left、.bounce-right、.bounce-left-right、.bounce-right-leftといった種類があるのが驚きです。

200以上のキーフレームのアニメーションエフェクト、280のCSSアニメーションクラス、5つのアニメーションスピードオプション、jQuery互換性のための拡張パッケージ、Bootstrap互換性のための拡張パッケージと、優れた機能性を備えています。

また、少ないファイルを組み合わせることにより、必要とするエフェクトを含んだ独自パッケージを構築できるのも特徴の1つです。

実際のデモ動作は、各デモに設置された「Try Action」ボタンをクリックすると、そのアニメーションエフェクトが実行されます。詳細を見たい場合は、同じく各デモに設置された「Detail」ボタンからチェックできます。

というわけで、豊富なCSSアニメーションエフェクトをサイトに取り入れたいという人は、ぜひ「effect.css」を活用されてみてはいかがでしょうか。

effect.css

chalk-animationカラフルなアニメーションを実装できる「chalk-animation」前のページ

ページ上部にスクロール移動してくれる「jQuery GoUp!」次のページjQuery GoUp!

関連記事

  1. jQuery Floating Social Share
  2. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  3. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  4. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  5. Jqx-Media-Slider
  6. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

最近の記事

  1. 桜と太陽
  2. ベルボン Mシリーズ
  3. ネック冷却ファン NRF10
  4. Kindle 8GBモデル
  5. プロテクティングクロス PC-E2

アーカイブ

PAGE TOP