進捗率を計算してスクロールアニメーションを制御する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は進捗率を計算して、スクロールアニメーションを実装する方法について書きたいと思います。 進捗率とは 進捗率とは、作業がどのくらい進んでいるかをパーセンテージ（0％から100％）で表したものになります。 スクロールアニメーションで進捗率を使うポイント スクロールアニメーションで進捗率を利用する場合は、スクロール開始地点（始点）からスクロール終了地点（終点）までの進捗率を、0から1で求めるように計算するとより使い勝手がよくなります。 どうして進捗率を0から1で取得するの？ なぜ使い勝手がよくなるかというと、理由は0から1という値にあります。 CSSのプロパティには、各々のプロパティで個別の最小値・最大値あるいは任意の値をいれることができます。 例えば、透明度を扱うopacityは最小値が0で最大値が1ですが、要素の回転を扱うrotationは最小値0で最大値
JavaScriptでスクロールバーの幅を調べる - #daiizメモ
ウェブページをデザインしていたところ、「スクロールバーの横幅」の値が欲しくなった。 検索してもすぐには見つからなかったので、ChromeのConsoleを開き、自分でwindowオブジェクト内を探しに行くことにした。「スクロールバーを含んだブラウザの横幅（①）」はwindow.innerWidthで得られることは知っていた。 結果 結局、「スクロールバーの横幅」を直接教えてくれるメソッドやプロパティは見つけられなかった。しかし、document.body.clientWidthを使って「スクロールバーを含まないブラウザの横幅（②）」を得ることに成功した。これにより、①と②の差をとることで「スクロールバーの横幅」を得られた。 まとめ プロパティ Live Demo*1 スクロールバーを含んだブラウザの横幅 window.innerWidth -- px スクロールバーを含まないブラウザの横幅
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
