タッチデバイスで知られている多くのモバイルサイトでは、スワイプジェスチャーの後、人が指を離した後にアニメーションが発生するようにスライダー（リーフレット）が配置されています。 これは、iOSデバイスのメイン画面などのネイティブスライダーほど美しくも便利でもありません。
スライダーをネイティブスライダーのように見えるようにするjQueryプラグインを作成し、興味のあるすべての人と共有したいと思います。 プラグインの動作は、たとえば、iPhoneやiPod Touchの
新しい検索結果ページの天気や写真で
確認できます 。
通常のCSS3 Transformとは異なり、「3D」はiOSでハードウェアGPUアクセラレーションを使用します。 これにより、非常にスムーズで楽しいアニメーションを実現できます。 アニメーション自体のハードウェアアクセラレーションのトピックは非常に広範囲であり、将来、このトピックに関する別の記事があります。
スライダーをネイティブに感じるために、多くの詳細を考慮しました。
- スワイプジェスチャが長い場合、すぐに数ポイントになると、スライダーはこれを理解します。
- 指定したしきい値（デフォルトでは30ピクセル）を超えないで1ステップ未満スワイプすると、スライダーは「跳ね返り」ます。
- また、左または右の制限を超えてスワイプしようとすると、スライダーが跳ね返ります。
ジェスチャー依存
スライダーがより活発に動作し、ジェスチャーからの期待に応えるために、加速を理解するように彼に教えました。 次の式で計算されます（その条件と値は実験的に選択されました）。
accel = speed > 0.3 && speed < 0.6 ? 2 :
speed >= 0.6 && speed < 1 ? 3 :
speed >= 1 ? 4 :
1;ここで、速度とは、スワイプジェスチャーの開始から終了までの距離をその時間で割ったものです（学校の知識「v = s / t」が最終的に役立ちました:)
平均的なスワイプジェスチャは、ミリ秒あたり約
0.4〜0.6ピクセルです。 CSSトランジションのアニメーション時間には、非常に小さいながらも顕著な変動があります。
animationTime = accel >= 3 ? '0.3' : '0.2';その後、ステップに加速度の値が乗算され、アニメーションが発生します。
外部API
スライダーをブロックにアタッチするとき、コールバック関数を指定できます。 必要なすべてのデータ（速度、ステップ、制限、時間など）の転送セットでスワイプするたびに呼び出されます。 指を使用せずにスライダーを移動し、スライダーブロックで
slideLeft([])または
slideRight([])イベントをトリガーすることもできます。
「GitHubでフォークしてください」
Githubのプロジェクトリポジトリでコメント付きのプラグインコードを表示またはダウンロードできます。
PS：
Yandexインターフェース開発者の公式ブログに興味のあるすべての人を招待し
ます 。