縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量(3kb gzip)のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った!とのことです。
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量(3kb gzip)のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った!とのことです。
こんにちは、おじいちゃんです。 今回は進捗率を計算して、スクロールアニメーションを実装する方法について書きたいと思います。 進捗率とは 進捗率とは、作業がどのくらい進んでいるかをパーセンテージ(0%から100%)で表したものになります。 スクロールアニメーションで進捗率を使うポイント スクロールアニメーションで進捗率を利用する場合は、スクロール開始地点(始点)からスクロール終了地点(終点)までの進捗率を、0から1で求めるように計算するとより使い勝手がよくなります。 どうして進捗率を0から1で取得するの? なぜ使い勝手がよくなるかというと、理由は0から1という値にあります。 CSSのプロパティには、各々のプロパティで個別の最小値・最大値あるいは任意の値をいれることができます。 例えば、透明度を扱うopacityは最小値が0で最大値が1ですが、要素の回転を扱うrotationは最小値0で最大値
this.scrollTop() this.scrollBottom() this.scrollLeft() this.scrollRight() this.scrollCenter(, )
という指定がしてあったからでした。 これは body の子要素で body からはみ出る部分は自動的にスクロールバーが表示されて、スクロールが出来るようになります。 詳しくはこう で、図にしてみるとわかりやすいのですが +------------------------------------------------------------- | html | +-------------------------------+←ーー ここがscrollTop = 常に0 | | body | ↑ | | +---------------------------+ | | | | | ↑ | | bodyではスクロールしないで | | | Scroll Area | | 子要素の中でスクロールする | | | ↓ | | | | | +---------------------------+
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く