L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1

EN

JP

こんにちは!

CONTACT - STEP01

Please select a line of inquiry from the following.

BUSINESS INQUIRIES
JOB OPPORTUNITIES
OTHER INQUIRIES

CONTACT - STEP02

Please select your request from the following.

BRANDING
DIRECTION SERVICE
CREATIVE SERVICE
DESIGN SERVICE
TECHNICAL SERVICE

CONTACT - STEP03

Please select a budget from the following.

APPROXIMATE BUDGET
0 $
0 $
~
15000 $
~
30000 $
~
45000 $
~
60000 $
~
75000 $

CONTACT - STEP04

Please select the project release date from the following.

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

CONTACT - STEP05

Please enter the project information on the form below,
 and after reviewing the privacy policy, proceed to the confirmation screen.

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

CONTACT - STEP02

Please select a job type from the following.

DIRECTOR
DESIGNER
DEVELOPER
OTHER

CONTACT - STEP03

Please select your years of experience from the following.

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

Please select your preferred employment form from the following.

REGULAR EMPLOYEE
CONTACT EMPLOYEE

CONTACT - STEP05

Please state the reason for your application in the form below.

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

CONTACT - STEP02

Please enter the relevant information on the form below, and after reviewing the privacy policy, proceed to the confirmation screen.

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

C L O S E

S U B M I T

CONTACT COMPLETE

Thank you for your inquiry.
You will receive a reply as soon as we confirm the details of your inquiry.

THANK YOU
CLOSE

NEWS

BLOG Sep.15.2017

STUDY CASE: INTERSECTION OBSERVER

by Hirokazu Goto

SHARE

Hello everyone. My name is Goto and I am a developer.
Today I would like to show my research about IntersectionObserver API which I have been interested in for a while.

What is Intersection Observer?

Intersection Observer calculates how much of a target element overlaps the visible portion of the page (viewport) easier than the conventional method we have been using.

Before Intersection Observer, you would have to detect which elements are visible within the current viewport’s boundaries, and then manually reduce the impact caused by events triggered by scrolls.

Now with Intersection Observer, you can do these things with ease.
Currently Intersection  Observer can be used on any browsers except for IE and safari.

Can I Use Intersection Observer https://caniuse.com/#search=IntersectionObserver Intersection Observer Japanese ver. (1 Sep, 2017 draft) https://triple-underscore.github.io/IntersectionObserver-ja.html#dom-intersectionobserver

How to Use Intersection Observer API

Intersection Observer can be used as shown below;

//Select the child element to observe
let target = document.querySelector('.child');
//Select option
let options = {
//Select the parent element (default: document)
root: document.querySelector('.parent'),
//Select ratio between 0-1(default: 0,1)
threshold: [0,0.5,1],
//How much to shrink or expand the root’s logical size (default: 0)
rootMargin: 100px
}
let observer = new intersectionObserver((changes) => {
//Callback that is received when detect an intersection
console.log(changes[0])
},options);

//Enter the selected element onto observe
observer.observe(target);
//unlock observe for the selected element
observer.unobserve(target);
//unlock observe for all the selected elements
observer.disconnect();

The Information You Get When The Callback Function Is Fired

Here is the list of the information you receive when a callback function is excused;

  1. time : timestamp that is created whenever a callback is fired
  2. rootBounds : the relative position of the targeted area positioned with an interaction root
  3. boundingClientRect :  the relative position of the intersected element
  4. intersectionRect : the relative position of the intersection on the viewport.
  5. intersectionRatio :  the ratio of the visible element
  6. target : the element in the intersection
  7. isIntersecting : whether an element and an viewpoint intersec

Demo

I have created a couple of samples using Intersection Observer.
The operation for when the element is in the viewport and when isn’t:

Change the operation depending on the assigned ratio:

My Review On Intersection Observer

I found these traits with IntersectionObserver after creating some samples.

  1. Very easy to implement it regardless of actual on-screen visibility.
  2. Observers can use boolean value when implement toggle functionality.
  3. It allows observers to eliminate rendering excess events.
  4. A viewport and an element must be in parent-child relationship in order for them to intersect.
  5. Effect like parallax cannot be implemented even with using threshold.
  6. Easy to control asynchronously as it has a scrap option.

Some browsers do not support Intersection Observer yet, so unfortunately it isn’t realistic to use it on daily basis at this stage.  But I will continue looking for better tools to use to reduce performance problems triggered by scrolling.

by Hirokazu Goto

SHARE

OTHER ARTICLES

TOPIC
Jun.06.2018

Hold the Oyakomonodukuritaiken in the summer of 2018

by Mami Ohtani

BLOG
May.31.2017

GIVE A LITTLE EXTRA IN YOUR OMOTENASHI

by Maho Noda

TOPIC
Dec.18.2017

HOLIDAY NOTICE - NEW YEAR

by Staff

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