L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1
EN

HELLO!

JP

CONTACT

お問い合わせ内容を入力し、プライバシーポリシーをご確認の上、NEXT STEPSUBMITボタンより確認画面へ進んでください。

  • ✳︎マークは必須項目となります。
  • お問い合わせの内容に合わせ、詳細をご連絡ください。
  • 営業日、三日以内に担当者より返信させていただきます。
  • 営業目的や人材紹介目的の場合、返信を控えさせていただきます。

B A C K

✳︎
お問い合わせ内容を選択してください
お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ
ステイフルライフストアへのお問い合わせ
✳︎
項目を選択してください
ブランディング依頼
ウェブ制作依頼
グラフィックデザイン依頼
その他スポットでのご依頼
✳︎
希望職種を選択してください
エンジニア職でのご応募(経験者のみ)
デザイナー職でのご応募(経験者のみ)
ディレクター職でのご応募(経験者のみ)
総務職でのご応募(経験者のみ)
ステイフルライフストアスタッフのご応募
この項目は入力できません
✳︎
✳︎
✳︎
✳︎
プライバシーポリシーに同意しました。
  • STEP01
  • STEP02
  • STEP03

C L O S E

B A C K

S U B M I T

N E X T S T E P

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG Sep.15.2017

intersection observerを学ぶ

by Staff

SHARE

前々から気になっていたintersection observer apiについて調べてみました。

intersection observerとは

intersection observer apiとは表示領域と要素の交差を検出することができるAPIです。

今まではscrollTopやrequestAnimationFrameなどを用いて要素位置を検出して様々な処理を行なっていたのですが、スクロールの管理は過度にイベントが発火してしまうため、間引きなどを行い、パフォーマンスへの影響を極力抑える必要がありました。

intersection observerを使用することで要素位置の検出を行い、手軽にイベントの発火などを最小限に抑えることができます。
現在intersection observerは、IEとSafariを除くブラウザで利用することが可能です。

参考
https://caniuse.com/#search=IntersectionObserver

intersection observer 日本語訳(2017年9月1日付け編集者草案)
https://triple-underscore.github.io/IntersectionObserver-ja.html#dom-intersectionobserver

実装手順

intersection observerは下記実装で利用することができます。

//交差を検出したい子要素を取得
let target = document.querySelector('.child');
//指定できるoption
let options = {
//交差の基準となる親要素を指定(初期値はdocument)
root: document.querySelector('.parent'),
//要素を検出したいratioを0-1の間で指定が可能(初期値は0,1のみ)
threshold: [0,0.5,1],
//交差の基準を指定した値で変更(初期値は0)
rootMargin: 100px
}
let observer = new intersectionObserver((changes) => {
//交差を検出した際に呼ばれるコールバック
console.log(changes[0])
},options);

//指定した要素をobserveに登録する
observer.observe(target);
//指定した要素のobserveを解除する
observer.unobserve(target);
//登録されている全ての要素のobserveを解除する
observer.disconnect();

コールバックで取得できる要素の情報

コールバックで取得できる情報は下記となります。

  1. time : コールバックが発火した際のタイムスタンプ
  2. rootBounds rootで指定した領域の画面表示上の相対位置
  3. boundingClientRect 交差した要素の画面表示上の相対位置
  4. intersectionRect 交差している領域の画面表示上の相対位置
  5. intersectionRatio 交差した要素が領域に入っている比率
  6. target 交差した要素
  7. isIntersecting 交差しているかどうか

サンプル

いくつかintersection observer apiを使用して作ってみました。

割り当てられた比率に応じて変更します。

intersection observer apiの特徴

intersection observer apiを使っていくつかサンプルを作ってみたのですが、下記のような特徴がありました。

  1. 表示 / 非表示で処理を行う場合の実装がとても楽
  2. トグルを実装する際にも状態管理はisIntersectingのbooleanを利用することで行える
  3. イベントの間引きを処理を行う必要がない
  4. 表示領域と交差させたい要素は必ず親子関係である必要がある
  5. パララックスのような表現はthresholdを利用しても実装できない
  6. 破棄用の処理も用意されているので非同期での管理がしやすい

いまはまだ利用できないブラウザがあるためすぐに使用することはできませんが、スクロールによるパフォーマンスには悩むことが多いので、今後も最適な方法を探していきたいと思います。

by Staff

SHARE

OTHER ARTICLES

CASE
Aug.05.2020

京都丹後の伝統文化と地域ブランドの魅力が織りなすメディアサイトの価値

by UNIEL

TOPIC
Dec.18.2017

年末年始休暇のお知らせ

by Staff

BLOG
May.31.2017

おもてなしにプラスの心を持って

by Maho Noda

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL