プログラミング

プログラミング

Intersection Observer APIを使いこなそう!【その限界はどこかを実験】

1,481 views

読了時間 : 約1分56秒

新しいIntersection Observer APIを使用して、ビューポートに対する要素の可視性を制御する方法を学びましょう。

ビューポート内での可視性に基づいて要素の表示を制御することは、通常、ウィンドウの高さとgetBoundingClientRect()を使用した計算を含む、面倒な作業でした。

現在、この作業をより簡単にできるIntersection Observerと呼ばれる新しいAPIが作成されました。これは現在Chrome、Firefox、Opera、Edgeでサポートされており、優れたポリフィルが用意されています。

Intersection Observerをその限界まで推し進める実験を行いました。興味のある方はチェックしてみてください。

 

注:私が作ったのと同じ数のオブザーバーをプロダクションサイトに作成しない方がいいでしょう。パフォーマンスの問題にぶつかります。しかし、この実験は、APIの仕組みを視覚化する助けとなります。

 

 

HTMLとCSS

CSSグリッドを使ってスタイリングされたカードのシンプルなグリッドがあります:

 

 

 

オブザーバーの作成

各カードの上をループし、オブザーバーを作成します。オブザーバーは、コールバックとオプションオブジェクトを受け入れます。オプションでは、rootMarginを負の値に設定しています。これにより、交差ポイントが100pxだけすべての辺のビューポートから挿入されます。したがって、オブザーバーが交差ポイントとして読みこむ前に、カードをビューポート内で最大100ピクセルにすることができます。

 

また、2つの数値を持つ配列としてthresholdオプションを設定しました。これらは本質的に、オブサーバーが応答する交差ポイントの割合なのです。したがって、カードがビューポートで50%であり、100%である場合、オブザーバーはコールバックを起動します。

 

コールバックの設定

コールバック関数はエントリの配列を与えます。各エントリは本質的に交差ポイントの変更です。各エントリのintersectionRatioをチェックし、適切なスタイリングを適用することができます。

 

 

switch文を使用して、さまざまな比率の異なるスタイルを適用します。

 

 

 

 

結論

IntersectionObserver APIは、ビューポートに対する要素の可視性をチェックするための、より簡単で強力なメソッドを提供します。ブラウザのサポートがこのまま向上していけば、ポリフィルを必要とせずに本番サイトですぐに使用することができるでしょう。

 

 

 

▼API関連ではこちらの記事もおすすめです!

【Webページの印象はふんわりソフトに】Web Animation APIを使って「フェードイン効果」を作る方法

WordPressのREST APIとは…?【どういったところで、何のために使われる?】

 

 

 

※本記事はControlling Element Visibility with the Intersection­Observer APIを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ