本発明の瞬間から、ページへのスクロールスクロールアニメーションはほとんど修正されず、いかなる方法でも装飾されなかった。 はい、誰もそれを必要としないので、動作します。 スクロールする場所と取得する必要がある量を言います。 それだけです
スクロールアニメーションを別の角度から見ることにしました。 何かが彼にとって間違っているからではなく、それが可能であり、より興味深いからです。 いくつかの観察と空想の爆発の結果、私たちはより興味深いアニメーションのための3つの方法を思いついた。 その結果、Scrollport.jsプラグインですべてを3つの新しいモードと1つのクラシックモードでラップしました。 デモをご覧になり、猫の下に行ってください。
古典的なスクロールアニメーションは1行に収まります。
$(“ html, body “).animate( { scrollTop: $( '#my_target' ).offset().top }, 600 );
この行の重量は78バイトです。 ただし、執筆時点で非常に人気のあるjQuery.scrollToプラグインがあり、2132個の星があり、30,000を超えるサイトで使用されています。 この星の重さは、同じことをする文字列の30倍です。 もちろん、このプラグインには多くのローションがありますが、まれなケースです。
1行で同じことが行われる場合、プラグインを使用することは適切ではないと考えます。 「Scrollport.js」は、前述のプラグインよりも太いですが、1行に収まらないことを行います。 また、ボーナスとして、スクロールアニメーションを開始するリンクを作成するための補助機能が追加されました。
使い方
JSファイルをプラグインに接続して、次のように記述します。
// id «my_target». $.scrollport( '#my_target' ); // id «my_link», id «my_target». $( '#my_link' ).scrollport_link( '#my_target' ); // , «roll». $.scrollport( '#my_target', { mode: 'roll', speed: 1500 } );
さまざまな設定をプラグインに転送し、APIにアクセスできます。また、アニメーションを呼び出す方法は多数あります。 詳細については、githubリポジトリのreadmeを参照してください 。
4種類のモード
プラグインの設定では、通常、ロール、ハード、ソフトの4つのモードのいずれかを転送できます。 それぞれを順番に考えてみましょう。
いつもの
クラシック プラグインは、スクロールをどこに移動するか、それが所定の位置にどれだけの時間かかるかを知る必要があります。 あなたはこれを何百回も見てきましたが、このモードについてユニークなコメントをすることはできません。
迷惑なことが1つありますが。 1秒以内に適切な場所にいる必要があると言われている場合、大中距離でもすべてが悪く見えることはありません。 しかし、アニメーションをターゲットの100ピクセル前に呼び出すと、1秒でアニメーションに飽きることがあります。 2番目のモードでは、このピッキングが可能です。
ロール
同じ古典的な側面図。 どこに移動し、どの速度で移動するかを知る必要があります。 少し見栄えが良く、インテリジェントに見えます。
デフォルトの速度は2500ピクセル/秒です。 100ピクセルを駆動する場合、この速度は大きすぎることが判明する可能性があり、適切な位置に鋭すぎたように見えます。 この問題を回避するために、デフォルトで300ミリ秒の最小時間を指定できます。 つまり、この時間よりも早く目標に到達することはできません。
長距離の移動は長すぎるため、最大待機時間を制限するパラメータが導入されています。
カジュアルな訪問者は、「ロール」モードと「通常」モードの違いを感じることはほとんどありませんが、ダイナミクスの美しさを愛する人として、「ロール」モードは私をより引き付けます。
ハード
ターゲットへの5ピクセルの場所への急激な移動は、スクロールがその場所までスムーズにスクロールします。 VKontakteからこのモードのアイデアを盗みました。 ページに移動し、ニュースフィードを少し下げて、画面の左側にある「上」のストリップをクリックしてから、もう一度クリックします。
穏やかな「ロール」モードと「通常」モードは、より粗雑で原始的なものに置き換えることが望ましい場合があります。 しかし、それほど野barではなく、アンカーリンクに行くようなものです。
柔らかい
スクロールはターゲットに向かって伸び、200ピクセルを通過します。このとき、画面全体が白いレイヤーでスムーズに引っ張られます。 次に、ターゲットへのポイント200に即座に移動しますが、白いレイヤーが完全に不透明になったため、急激なジャンプは見られません。 スムーズにその場所に到達しますが、白い層は消えます。 おそらく、速度と滑らかさの最適な比率、およびこの効果は面白くて異常に見えます。
おわりに
一部の人は、このプラグインが魅力的で新しく、面白いと感じるでしょう。 残りについては、私はこの記事を馴染みのあるものの新鮮な外観として捉えることを提案します。 プラグインモードについてのご意見をお待ちしています。 誰かがさらにいくつかのモードを提供するなら、私はとても幸せです。
私はウェブに何が起こるかが好きです。 下品なテーブルから、サイトは芸術作品に変わります。 これに関与したい、貢献したい。 小さなことから始めて、いつか価値のある、重要なことをやると思います。 発明と実験で幸運を祈ります。ウェブの運命は私たちの手にかかっています。