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

関連記事

  1. NO IMAGE
  2. Yet Another Ripple Plugin
  3. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  4. 4PXMMenu

    JavaScript

    滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

    4PXMMenuはモバイルサイトに最適なメニューを実装することができる…

  5. SweetAlert
  6. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP