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. Simply Modal Box
  2. jQuery Section Navi Plugin
  3. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  4. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

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

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  6. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP