ITエンジニア/デザイナ向けにオープンソースを毎日紹介

動作の重たい処理をすれば、レンダリングが追いつかずに60fpsを維持できないのは当たり前です。しかし、だからこそ表示する内容やテクニックを駆使することで高速な描画を維持できるととてもインパクトがあります。

Webページのスクロールにおいても改善すべきポイントがあります。高速なスクロールを実現するためのハックが60fps scrollingになります。

60fps scrollingの使い方

現在はバージョン2になっており、多少やり方が変わっています。

通常のスクロール。60fpsを維持できないのはペイント処理が入っているからです。これはマウスオーバーに由来するものです。
通常のスクロール。60fpsを維持できないのはペイント処理が入っているからです。これはマウスオーバーに由来するものです。

そこでこんな赤い枠を用意します。実際の運用時には透明で隠しておくのが良いでしょう。
そこでこんな赤い枠を用意します。実際の運用時には透明で隠しておくのが良いでしょう。

そしてスクロール時にはマウスに追従する形でマウスオーバーの発生を防ぎます。
そしてスクロール時にはマウスに追従する形でマウスオーバーの発生を防ぎます。

解説動画はこちら。

確かに画像にマウスオーバーすると枠が表示されます。この枠はスクロール中には本来不要なもので、これによってFPSが落ちてしまうのは残念です。将来的にはブラウザが対応するかも知れませんが、今は60fps scrollingを使うのが良さそうです。

60fps scrollingはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

A follow up to obtaining 60fps scrolling performance | The CSS Ninja - Web tech, front-end performance & silly ideas

デモ:60fps scrolling with real content | mouse follow testcase

ryanseddon/60fps-scroll

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2