Fork me on GitHub

ES6-IntersectionObserver

This is a test of ES6's IntersectionObserver.
The point is to easily detect if elements are displayed or not.
This will allow to create awesome UI
Take me to the code !

The following dummy content will be animated when entering on page


title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
  • Some
    • Random
    • List
    • Of
  • Random
  • Things
title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.

A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J

Hello I'm a big block of text !
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet asperiores atque, beatae doloribus esse, eum harum iste laboriosam maxime minus nesciunt non odio omnis porro quaerat quasi totam ut.
Commodi facere minima molestias officia quo similique soluta suscipit velit, vero. Adipisci, autem eaque impedit incidunt iusto perferendis quisquam voluptates? Alias aut, cupiditate expedita facilis illum minima quas sed voluptate.
Commodi, eum magnam molestiae natus praesentium tenetur vitae voluptatem! Ab aliquid amet at deserunt doloremque, ducimus eaque iure maxime, minima nisi officia omnis quasi quia quibusdam quidem saepe sint totam?
Ab alias assumenda atque autem blanditiis, deserunt dignissimos dolores doloribus ex, fugit hic inventore ipsam ipsum iure iusto labore provident quidem rem similique suscipit unde veniam vero. Officia, quibusdam rerum.
Ad, adipisci asperiores beatae culpa dolor ducimus ea, eligendi ipsum iure, libero maxime odio optio quas quos sequi ullam veritatis voluptas? Dicta doloremque ducimus eum exercitationem, ipsa sunt ut voluptates.

A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J
A
Anon
Lorem ipsum ! IntersectionObserver is cool !
John Doe
Again some random text to fill space
J