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. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  2. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  3. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  4. no-image
  5. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  6. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP