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」のご紹介でした。

PhilterCSSのフィルターをコントロールできるjQueryプラグイン「Philter」前のページ

Webページ上の好きな場所をハイライトできる「hop」次のページhop

関連記事

  1. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  2. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  3. Hamburger Icon Menu
  4. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  5. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  6. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP