🙌🏽 🧑🏿‍🤝‍🧑🏽 😵 キネティックスクロールバー ➿ 🔮 ⛪️

動的スクロールの効果は、ほぼどこでも見られるようになりました。これは、指やスタイラスを管理するのに本当に便利で、マウスでスクロールするときにかなり面白いです。

ウェブ上では、そのような効果は定着しつつあります。便利な場所を考えるのはそれほど簡単ではありません...おそらく、ページ内の一部のコンテンツ（主に写真）をスクロールするために使用されるスクロールバーだけが思い浮かぶでしょう。たとえば、ほとんどすべてのサイトでギャラリーの実装を確認できます。同意します。スライダーがすぐに停止せず、マウスボタンが離されるとすぐに停止しますが、慣性によってさらに移動を続け、徐々に停止する場合はさらに興味深いでしょう...
このような動的なスクロールバー効果を作成するプロセスを検討します。ここで見ることができる最後に何が起こったのか

アルゴリズム

開始するには、一般的なアルゴリズム（スライダーをドラッグして「スクロール」）を検討してください。驚くほど簡単です：

オブジェクトでmouseDownをキャッチし、クリックの座標を記憶します。
mouseMoveを追跡します。クリックがあった場合（ポイント1）、オブジェクトを新しい場所に移動します。それ以外の場合は何もしません。
速度を測定します。 dxを定義するだけです：1つのmouseMoveイベントでオブジェクトのx座標を変更します。
mouseUpをキャッチします。最後に見つかったdxに基づいて、運動量を計算し、オブジェクトを転送する距離を見つけることができます。
減衰式を使用して、オブジェクトの動きを目的の距離にアニメーション化します。

どうやら、すべてが非常に簡単です。明らかに、そのようなアルゴリズムは普遍的であり、JSだけに適していません...

実装

便宜上、jQueryライブラリーとjQuery UIからのイージング効果を使用できます。
HTMLコードは次のとおりです。

<div id="track"> <div id="thumb"></div> </div>

ここで、trackはスライダーが実行される領域であり、thumbはスライダー自体です。
CSS：

 #track { width: 500px; position: relative; display: block; height: 22px; margin: 20px; border: solid 1px #000; overflow: hidden; } #track #thumb { width: 70px; height: 22px; position: absolute; background-color: gray; left: 200px; }

これで、スクリプト自体の作成に進むことができます。これはトレーニングの例であるため、通常の手続き型スタイルで記述します...必要に応じて、プロトタイプで書き換えたり、jQueryプラグインとして設計したりできます。
次のグローバル変数を導入します。

$ track（jQueryオブジェクト）-スクロールバーエリア
$ thumb（jQueryオブジェクト）-スライダー
isClicked（bool）-スライダーがクリックされるかどうかを決定する変数。
clickPointX（int）-オブジェクトのクリックのx座標
dx（int）-1つのmouseMoveイベントでオブジェクトのx座標を変更します。

 var $track = $('#track'); var $thumb = $('#thumb'); var isClicked = false; var clickPointX = 0; var dx = 0;

最初に、赤毛のブラウザがスライダーをドラッグしようとするのを防ぎましょう：

 $thumb.bind('dragstart', false);

オブジェクトでmouseDownを処理します。

 $thumb.mousedown( function(e) { //     clickPointX = e.pageX - $(this).offset().left; isClicked = true; $thumb.stop(); //    });

mouseMoveを処理しますが、オブジェクトではなくドキュメント全体で処理します

 $(document).mousemove( function(e) { if (isClicked) { //   ,     //   var x = (e.pageX - $track.offset().left - clickPointX); //       if (x < -maxBorderOut) { x = -maxBorderOut; } if ( (x + $thumb.width()) > ($track.width() + maxBorderOut)) { x = $track.width() - $thumb.width() + maxBorderOut; } //   var selfLeft = parseInt($thumb.css('left')); $thumb.css({'left': x + 'px' }); dx = x - selfLeft; } });

ここで、未宣言の変数maxBorderOutに出会います。これは、スライダーを領域の境界を越えてドラッグできる最大ピクセル数を示します。
そして最後に、mouseUp：

 $(document).mouseup( function(e) { if (isClicked) { if (Math.abs(dx) < lapse) { dx = 0; } var selfLeft = parseInt($thumb.css('left')); //    // "impulse * dx"    ,     var x = (selfLeft + impulse * dx); // ,        scroll box'a if (x < 0) { x = 0; } if ( (x + $thumb.width()) > $track.width() ) { x = $track.width() - $thumb.width(); } //    $thumb.stop().animate({'left': x + 'px'}, speed, 'easeOutQuart'); } isClicked = false; });

lapse変数はエラーを定義します。つまり、 dxがこのエラーより小さい場合、アニメーションは発生しません。値は目で選択されたものであり、あまり適切に選択されない場合があります。
インパルス変数は、スライダーに作用し、移動に必要な距離を決定するインパルスの値です。実際、係数にdxを掛けます。彼はまた目によって選ばれました。
速度 -アニメーションの速度。
これらのパラメーターの値を変更することで、特定のニーズに合わせてスクロールバーをカスタマイズできます。必要に応じて、垂直スクロールを作成することは難しくありません。

おわりに

これはスクロールバーの完全な実装ではなく、ドラッグアンドドロップと「動的」スクロールに直接関与する部分のみです。コードは非常にシンプルで、効果は非常に興味深いものです。
たとえば、ページネーション、画像ギャラリーなどを実装するときに使用できます。

UPD jQueryプラグインを作成しました。こちらからダウンロードできます。どのように機能するか、単純なカルーセルの例を見ることができます...

使い方はとても簡単です：

 <div id="track"></div>

 $('#track').kineticBar()

キネティックスクロールバー

アルゴリズム

実装

おわりに

More articles: