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 - STEP01

お問い合わせ内容を以下の中から選択してください。

お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ

CONTACT - STEP02

以下の項目よりご依頼内容を選択してください。

ブランディングに関するお問い合わせ
ディレクションに関するお問い合わせ
制作全般に関するお問い合わせ
デザインに関するお問い合わせ
開発に関するお問い合わせ

CONTACT - STEP03

以下よりご予算を選択してください。

APPROXIMATE BUDGET
0 yen
0 yen
~
2,000,000 yen
~
4,000,000 yen
~
6,000,000 yen
~
8,000,000 yen
~
10,000,000 yen

CONTACT - STEP04

以下よりプロジェクトの公開日を選択してください。

ESTIMATED TIMELINE
0 month
0 month
~
1 month
~
2 month
~
3 month
~
4 month
~
5 month
~
6 month

CONTACT - STEP05

以下のフォームよりプロジェクトの情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
COMPANY ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下の項目より職種を選択してください。

ディレクター
デザイナー
ディベロッパー
その他

CONTACT - STEP03

以下よりご経験年数を選択してください。

YEARS OF EXPERIENCE
1 year
0 year
~
1 year
~
2 year
~
3 year
~
4 year
~
5 year
~
6 year
~
7 year
~
8 year
~
9 year
~
10 year

CONTACT - STEP04

以下の項目よりご希望の雇用形態を選択してください。

正社員
契約社員

CONTACT - STEP05

以下のフォームより志望動機をご記入ください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
URL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下のフォームより情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎
STEP01

C L O S E

S U B M I T

CONTACT COMPLETE

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

THANK YOU
CLOSE

NEWS

BLOG Sep.15.2017

Intersection Observerを学ぶ

by Staff

SHARE

前々から気になっていたIntersection Observer APIについて調べてみました。

Intersection Observerとは

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

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

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

参考
Can I use Intersection Observer
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を使用して作ってみました。

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

Intersection Observerの特徴

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

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

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

by Staff

SHARE

OTHER ARTICLES

TOPIC
Dec.18.2017

年末年始休暇のお知らせ

by Staff

BLOG
Nov.24.2016

仕事と子育ての両立を図るには

by Maho Noda

BLOG
Apr.17.2019

視点をかえること

by Mami Ohtani

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