Force.js

JavaScript

要素を手軽にアニメーション化できる「Force.js」

Force.jsはページ上の要素を手軽にアニメーション化させることができるJSライブラリです。CSS transitionを活用し、さまざま動きが表現可能です。ちなみに、Force.jsは100%ピュアvanillaとのこと。

Force.js

Force.js

Exampleというところでデモ動作を確認することができます。「Hit tha ball!」にある黒丸をクリックすると動き出します。

右側にある「Easing Functions」という項目から、好きなEasingの種類を選択できます。Easing機能には、swing、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuartなどなど、たくさんの種類が用意されています。

いろんな動作を試しながら、自分好みEasing機能を見つけてみてはいかがでしょうか。

Durationから速度を変更することも可能です。ライセンスはMITとのこと。

というわけで、要素を手軽にアニメーション化させることができる「Force.js」のご紹介でした。

関連記事

  1. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  3. Responsive Multi Menu
  4. SweetAlert
  5. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  6. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP