Add demos for Intersection Observer API
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Feb 2019 18:55:31 +0000 (18:55 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Feb 2019 18:55:31 +0000 (18:55 +0000)
commit8637a74aa4c49a00e4f6f8c3484a820922a5af73
tree7ba5e0e6ce92a0c2e4eaf841f02a2a68919f5d41
parentc1d660ec16722060420cac3840810773ff98835d
Add demos for Intersection Observer API
https://bugs.webkit.org/show_bug.cgi?id=194219

Reviewed by Simon Fraser.

* demos/intersection-observer/lazy-image-load/index.html: Added.
* demos/intersection-observer/lazy-image-load/scripts.js: Added.
(ImageLoader):
(ImageLoader.prototype.findImages):
(ImageLoader.prototype.smallURLForImage):
(ImageLoader.prototype.largeURLForImage):
(ImageLoader.prototype.setupObserver):
(ImageLoader.prototype.intersectionsChanged):
* demos/intersection-observer/lazy-image-load/style.css: Added.
(body):
(section):
(header):
(.main):
(.main img):
(.stories):
(.world, .local):
(.world):
(.local):
(.ad):
(.contents):
(.sidebar):
(.links):
(.main-story):
(.main-story img):
(.top-story):
(.top-story img):
(.mid-story img):
(.link-group):
(.link-group img):
(.link-group ul):
(.link-group li):
(footer):
(footer ul):
(footer a):
(.footer-col):
* demos/intersection-observer/simple/script.js: Added.
(addToLog):
(clearLog):
(stringFromRect):
(intersectedCallback):
* demos/intersection-observer/simple/simple-observer-iframe.html: Added.
* demos/intersection-observer/simple/simple-observer-root-margin.html: Added.
* demos/intersection-observer/simple/simple-observer.html: Added.
* demos/intersection-observer/simple/styles.css: Added.
(body):
(.results):
(.results button):
(h2):
(#logging):
* demos/intersection-observer/triggered-animation/index.html: Added.
* demos/intersection-observer/triggered-animation/script.js: Added.
(AnimationManager):
(AnimationManager.prototype.setupObserver):
(AnimationManager.prototype.intersectionsChanged):
* demos/intersection-observer/triggered-animation/style.css: Added.
(body):
(p):
(.animation-container h1):
(.animation-container):
(.animation-container .box):
(.slide.box):
(.animation-container.visible > .slide.box):
(.slide.animation-container div:nth-of-type(1)):
(.slide.animation-container div:nth-of-type(2)):
(.slide.animation-container div:nth-of-type(3)):
(.spin):
(.animation-container.visible .spin):
(@keyframes spin):
(to):
(.animation-container.svg):
(.animation-container.svg path):
(.animation-container.svg.visible):
(@keyframes stroke-move):
(.animation-container.svg circle):
(.animation-container.svg.visible circle):
(.animation-container.svg circle:nth-of-type(2)):
(.animation-container.svg circle:nth-of-type(3)):
(.animation-container.svg circle:nth-of-type(4)):
(.animation-container.svg circle:nth-of-type(5)):
(@keyframes circle-scale):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240932 268f45cc-cd09-0410-ab3c-d52691b4dbfc
12 files changed:
Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/intersection-observer/lazy-image-load/index.html [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/lazy-image-load/scripts.js [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/lazy-image-load/style.css [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/simple/script.js [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/simple/simple-observer-iframe.html [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/simple/simple-observer-root-margin.html [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/simple/simple-observer.html [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/simple/styles.css [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/triggered-animation/index.html [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/triggered-animation/script.js [new file with mode: 0644]
Websites/webkit.org/demos/intersection-observer/triggered-animation/style.css [new file with mode: 0644]