Force.jsを使って簡単にページをスクロールしてアニメーション化する

Webアニメーションはこれまでになく簡単になりました。 純粋なCSS3アニメーション 規範になる。しかし, JavaScriptはまだ非常に貴重です そしてそれはテクニカルアニメーションのための数少ない信頼できる言語の一つです。.

の Force.jsライブラリ 無料のオープンソーススクリプトです。 動的ページアニメーション.

スクロールジャンプアニメーションを作成できます ページ自体の内側, または要素をアニメートすることもできます ページ周辺. どちらもセットアップが簡単で、ライブラリには多数の機能が付属しています。.

デフォルトでは、Force.js CSSトランジションに依存する いつでも可能なとき。これら 最近のすべてのブラウザで動作する そしてコードはずっと単純であり、それに加えてそれはユーザーに幅広いサポートを提供します。 JavaScriptを許可しない.

ライブラリは JavaScriptコードによる自然な代替方法, 古いブラウザでも大丈夫です.

そして、Force.jsは普通のライブラリなので、 依存関係を必要としない jQueryなど。しかし、あなたがjQueryを愛しているなら、あなたはForceの上でその構文を実行することができます、そしてそれはまだちょうどうまくいくでしょう。さまざまなWebサイトとの多様性に最適.

2つの大きなアニメーションテクニックは ジャンプする そして 動く. 要素がどこに移動しているか、どのくらい速く移動しているか、どの種類のイージング方法で移動しているかを判断します。.

図書館も持っています 多数のカスタムオプション アニメーションをさらに細かく制御するために微調整できます。あなたはできる アンカーリンクターゲットを編集する そして 必要なイージングを設定します-同じページに異なるイージングが必要な場合でも!

すべてのドキュメントは GitHubで入手可能, ファイルと一緒に.

あるいは、あなたがnpm / Bowerを好めばあなたはできる ファイルを直接引き出す そのように。あなたがする必要があります 一つを含める force.js ファイル あなたのヘッダーに入れて、あなたは行ってもいいでしょう.

それはいっぱいですので、私はまた、ドキュメントをスキムすることをお勧めします の例 ジャンプ（） そして 移動（） 方法.

彼らはふたりとも 時間、緩和、および位置についての引数を取る, したがって、これらがどのように機能するのかを理解することが重要です。とはいえ、これを理解してしまえば決して振り返ることはありません。なぜなら、それはどんなプロジェクトにとっても完璧な軽量アニメーションライブラリだからです。.