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. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  2. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

  3. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  4. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  5. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  6. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP