ホームページ » UI / UX » jQueryプラグインによるスムーズな全ページスクロールviewScroller.js

    jQueryプラグインによるスムーズな全ページスクロールviewScroller.js

    JavaScriptのスクロール効果 何十もの素晴らしいライブラリから選ぶために何年も前から出回っています。しかし、この分野の新たな候補は viewScroller.js.

    この非常に小さくて強力なライブラリは構築することができます 単一ページレイアウト それ ブロックとしてスクロール スクロールホイール(またはタッチパッド)を1回スワイプします。これにより、スクロールによってページの個々のセクションをスクロールしながらユーザーが移動する、制御されたレイアウトが作成されます。 ピクセルタイト精度.

    当然、これは完全に無料のライブラリです。 GitHubで入手可能 そして取付け易い Bowerまたはnpmで.

    ただし、viewScroller.jsは ではない 独立したJavaScriptライブラリ. jQueryと2つの特定のプラグインに依存しています。 jQueryのマウスホイール そして jQueryイージング. これらは どちらも必須 スクロール効果を適切に機能させるため.

    これはviewScrollerの価値を妨げる可能性があります。機能するためには少数のJSライブラリーが必要になるためです。とにかくすでにjQueryを使用しているのであれば、それは非常に簡単です。 viewScroller.jsは最も簡単なメソッドを提供します。 単一ページのスクロールWebアプリ 多くのコードなしで実行.

    それは、しかし, 非常に詳細なクラスとIDを使う スクロール効果を作成します。あなたはできる これらのクラスを編集する あなた自身のCSSファイルに 上書きする 基本コードで。あなたは見つけるでしょう 全リスト レポページに クラス名 そして デフォルト設定データ.

    最も簡単な開始方法は viewScrollerデモの複製. 右側に1つ、左側に1つ、中央にコンテンツを挟む2つのサイドバーがあります。.

    あなたがjQueryを燃料とするWebアプリで大丈夫なら、viewScrollerは使うのに素晴らしい無料のライブラリです。必要です かなりの数の依存関係 しかし、それらを設定するのは難しくありません。.

    でのぞき見をする ライブデモ そしてあなたがどう思うか見てください。あなたがUXとスクロールの振る舞いが好きなら、そしてそれに従ってください。 GitHubのセットアップガイド はじめに.