Roll.jsを使用して独自のページスクロール効果を構築する

あなたはウェブ上の何十ものスクロールライブラリを見つけることができます。ほとんどはJavaScriptで書かれており、独自の効果を持っているため、1ページのレイアウト、スクロールするアニメーションなどに適しています。.

しかし、どうですか あなた自身のスクロール効果をコーディングする? あるいは、ユーザーがページのどのくらい下までスクロールしたかを追跡する簡単な方法が必要な場合はどうなりますか。?

Roll.jsはあなたが探しているライブラリです。この オープンソースのスクリプトは狂って小さくてとても使いやすいです. 数行のJavaScriptでこれを機能させることができます。そして何よりも、それはあなたが特定の何かを実行することを強制するのではなく、むしろ あなたにツールを与える 独自のカスタムスクロール機能を作成する.

このライブラリの目的は、開発者が手間をかけずにスクロール効果を構成できるようにすることです。.

メインのGitHubレポジトリを見れば、いくつかのサンプルスニペットを含むセットアップガイド全体が見つかるでしょう。あなたはできる ユーザがスクロールする距離を呼び出すための関数を実行します。, または違う “ペイン” ページ上.

これらは単一ページのレイアウトで最も効果的に機能しますが、Roll.jsを非常に多くの用途に使用できます。.

1回の関数呼び出しで、次のものを含むスクロールごとにデータを取得できます。

総ページステップ数（該当する場合）.
ページを下にスクロールした合計％.
ページ上の現在位置（ピクセル単位）.
デバイスサイズに基づく総ビューポート高.

これは、ページの特定の部分にユーザーを移動させるジャンプリンクでも機能します。.

しかし、これらの機能の多くは他のライブラリにもあります。 Roll.jsが特別な理由?

その一部は構文ですが、ここでの大きな売りは、ライブラリの合計サイズです。 8KB 縮小時それはそのような詳細なスクロールライブラリのためにかなり小さいです!

これがメインのデモページでどのように機能するのかを見ることができます。 Roll.jsのソースコードをダウンロードして、これらのデモを自分で調べてください。.

ライブデモと生のライブラリファイルからのすべてはGitHubから引き出すことができます、そして、彼らは一緒に働くのがとても簡単です.

しかし、質問や提案がある場合、または素晴らしいライブラリに感謝したい場合は、作成者@williamnganにメッセージを送ることができます。.