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. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  3. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  4. Warp drive jQuery plugin
  5. jQuery Brazzers Carousel Plugin
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP