たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
