プログラム最終更新日:2021/03/25ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.javascript(jquery)でこの要素が画面に出てきたらふわっと表示する、画像が表示されたら読み込む(遅延読み込み)、こういう処理って昔はスクロールイベントを使っていましたよね。スクロールイベントはスクロールするたびに発生するんで負荷がすごい。ページの表示が遅くなったりカクついたり。そこでこういう画面に表示されたらなにかする、ていうのを簡単に実装できる「IntersectionObserver」というのが最近のブラウザでは使えるようになっています。ここではIntersectionObserverで設定できる「rootMargin」について例を交えながらわかりやすく紹介したいと思います。IntersectionObserverおさらいrootMarginとは1画像遅延読み込みのケース2画面中央付近でふわっとさせたいケースまとめIntersectionObserverおさらいIntersectionObserverのrootMarginについてみる前にまずはIntersectionObserverのおさらいから。);なくても大丈夫なんですが今回はjqueryを使ってます。最後の方の「#fuwatto-object1")[0]」の[0]はjqueryの時にjavascriptのDOMにアクセスするときの書き方となってます。これで#fuwatto-object1と#fuwatto-object2が画面に表示されたタイミングで「show」というクラスが付与されるようになります。画面の外にいくと今度は「show」クラスが削除されます。cssのshowクラスでなんかいい感じのアニメーションを設定してやればOK。これだけで、画面スクロールで表示されるたびにアニメーションさせることができる、というわけです。ハイ、これでIntersectionObserverのおさらい終了!では肝心の「rootMargin」についてみていきましょう。rootMarginとはでは満を持してIntersectionObserverのrootMarginとは?を見ていきましょう。使用ケースとrootMarginの設定例見る方が早いしわかりやすいんで、それでサクッと理解しちゃいましょう。1画像遅延読み込みのケース表示速度の向上のためIntersectionObserverを使って画像を都度遅延読み込みするケースです。イメージとしては、画像が画面内に入るちょっと前に読み込みをして、ユーザーには画像が遅延読み込みされてるのをまったく意識させない、そんなケースを考えてみましょう。このケースだと画像が画面に入る手前にIntersectionObserverイベントを発生させるわけですよね。});「rootMargin」の3つ目、つまり下方向だけ100pxにしてます。これで画面に要素が入る100px前にIntersectionObserverイベントが発生するようになります。2画面中央付近でふわっとさせたいケース今度はスクロールしてて、画面に表示されるとすぐふわっと表示させるんじゃなくて、ある程度画面の中央でふわっと表示させたいケースです。});今度は「rootMargin」の3つ目の下方向marginを-20%にしてます。これで画面の下部20%には当たり判定がなくなって、スクロールで21%目に要素が入ればイベントが発生するようになります。上の例でもrootMarginに0pxやらを設定していますが、まずよくミスりやすいところしてrootMarginは数字だけだと動きません。rootMarginには必ず”px”とか”%”とか単位を添えてやる必要があります。0px」と普通のmarginと同じで上下左右個別に設定もできるし、もちろんまとめて「0px」みたいに書いてもOK。まとめIntersectionObserverのrootMarginについて紹介しました。基本的に3つ目の数字、つまり下方向のマージンしか設定しないとは思いますが、とりあえず当たり判定の領域を変えてるイメージ。ネガティブマージンにすると当たり判定を狭められて、普通のマージンにすると当たり判定を画面外までのばせる、的な。スクロールよりなんか処理的にスマートだしぜひ参考に使ってみてくさいね。【laravel】@sectionに{{変数}}とした時に出力されないsqlでできる!二つの絞りこみ。