Intersection observer によるスクロールアニメーション - FirstLayout
はじめに多くのサイトでよく目にするのが、画面内に入った要素が動くアニメーション。 下にスクロールしていくと「画像などがふんわりと表示」「左や右から出てくる」「小さかったものが大きくなる」など、サイトを彩るアニメーションを見かけます。 このようなアニメーションは、以前は下記のようなスクロールイベントで実現していました。 // jQuery の場合 $(window).scroll(function () { 処理を書く; }); ただ、スクロールイベントは、ブラウザに負荷をかけてしまいます。というのも、スクロールをする度に、処理がなされてしまうためです。何も対策をしなければ、重いサイトになる弊害がありました。また、その対策には限度がありました。 そこで最近使われているのが、Intersection observer 。ブラウザに負荷をかけずに、スクロールで画面内に入った要素にアニメーションを
Scroll to the future—Martian Chronicles, Evil Martians’ team blog
If you’re interested in translating or adapting this post, please contact us first. Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Most of th
Window.requestAnimationFrame() - 60fpsの間隔で繰り返し処理を実行する | DOMリファレンス
2017/10/14 requestAnimationFrame()は、Windowのメソッドです。アラートを表示します。60fpsの間隔で繰り返し処理を実行します。繰り返し処理という点ではWindowOrWorkerGlobalScope.setInterval()と目的が同じですが、こちらはアニメーションを想定しているため、ブラウザがアクティブでない時は処理を一時停止するなどCPUメモリを節約してくれます。繰り返し処理はcancelAnimationFrame()で中止できます。 概要名前requestAnimationFrame所属WindowIDLunsigned long requestAnimationFrame(FrameRequestCallback callback); callback FrameRequestCallback = void (DOMHighResTim
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
