[JS]ありそうでなかった!スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量(3kb gzip)のスクリプトを紹介します。

作者様曰く、これ系のシンプルなライブラリがなかったから作った!とのことです。

サイトのキャプチャ

roll.js -GitHub

roll.jsのデモ

デモは、縦長ページにDOM要素を配置したものとCanvasを使ったものがあります。
まずは、DOM要素のデモ。

デモのキャプチャ

demo: DOM scrolling

寿司ネタが配置された縦長ページで、5つのセクションに分けられています。
スクロールすると、各DOM要素にエフェクトが適用されます。

デモのキャプチャ

2枚目までスクロール

表示エリアのサイズ、ページ全体のサイズ、セクション間のサイズを元に、現在表示されている位置・スクロール量・全体からの分量・セクションからの分量をスクロールに応じて取得できます。

デモのキャプチャ

各数値

デモはもう一つあります。

デモのキャプチャ

demo: Canvas

Canvas版では、値の取得がどのようになっているのかが分かると思います。

roll.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

HTMLは、普通の縦長ページを作成する感じでOKです。

Step 3: JavaScript

スクリプトの基本書式は、下記のようになります。

上記のHTMLで、#viewportのDOM要素は下記のように設定します。

イベントを設定する時は、下記のようになります。

sponsors

top of page

©2024 coliss