Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active September 6, 2017 21:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/8776a4cfd75f5d5b312e355e971d8ebb to your computer and use it in GitHub Desktop.
Save nolanlawson/8776a4cfd75f5d5b312e355e971d8ebb to your computer and use it in GitHub Desktop.
Download ZIP
IntersectionObserver demo
Raw
index.html
<!doctype html>
<html>
<head>
<title>IntersectionObserver demo</title>
<style>
body {
margin: 50px auto;
max-width: 1200px;
font-family: Helvetica, Arial, "sans-serif";
padding: 10px;
}
.twins {
display: flex;
margin: 0 auto;
flex-direction: row;
max-width: 1000px;
}
.output-container {
flex-grow: 1;
flex-basis: 0;
overflow-x: hidden;
}
.output {
background: rgba(0, 0, 0, 0.8);
min-width: 450px;
min-height: 200px;
color: #fafafa;
font-size: 18px;
margin: 0;
padding: 10px;
}
.container-container {
min-width: 300px;
margin: 0 auto;
flex-grow: 1;
flex-basis: 0;
overflow-x: hidden;
}
.container {
margin: 0 auto;
width: 300px;
height: 600px;
position: relative;
}
.mask {
width: 300px;
height: 150px;
top: 0;
position: absolute;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
touch-action: none;
pointer-events: none;
}
.mask2 {
top: 450px;
}
.no-mask {
width: 300px;
height: 300px;
position: absolute;
top: 150px;
z-index: 1;
touch-action: none;
pointer-events: none;
}
.no-mask-inner {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
border: 5px solid #ab008b;
z-index: 1;
touch-action: none;
pointer-events: none;
}
.scroller {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
overflow-y: scroll;
overflow-x: hidden;
background: #ededed;
}
.item {
width: 300px;
height: 45px;
display: flex;
align-items: center;
background: rgba(255, 192, 0, 0.8);
}
.item.highlighted {
background: rgba(255, 192, 0, 0.3);
}
.item-inner {
font-size: 24px;
padding-left: 30px;
color: #fafafa;
}
.item.highlighted > .item-inner {
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="twins">
<div class="output-container">
<pre class="output"></pre></div>
<div class="container-container">
<div class="container">
<div class="mask">
</div>
<div class="no-mask">
<div class="no-mask-inner"></div>
</div>
<div class="mask mask2">
</div>
<div class="scroller">
<div class="item"><div class="item-inner">Alpha</div></div>
<div class="item"><div class="item-inner">Bravo</div></div>
<div class="item"><div class="item-inner">Charlie</div></div>
<div class="item"><div class="item-inner">Delta</div></div>
<div class="item"><div class="item-inner">Echo</div></div>
<div class="item"><div class="item-inner">Foxtrot</div></div>
<div class="item"><div class="item-inner">Golf</div></div>
<div class="item"><div class="item-inner">Hotel</div></div>
<div class="item"><div class="item-inner">India</div></div>
<div class="item"><div class="item-inner">Juliet</div></div>
<div class="item"><div class="item-inner">Kilo</div></div>
<div class="item"><div class="item-inner">Lima</div></div>
<div class="item"><div class="item-inner">Mike</div></div>
<div class="item"><div class="item-inner">November</div></div>
<div class="item"><div class="item-inner">Oscar</div></div>
<div class="item"><div class="item-inner">Papa</div></div>
<div class="item"><div class="item-inner">Quebec</div></div>
<div class="item"><div class="item-inner">Romeo</div></div>
<div class="item"><div class="item-inner">Sierra</div></div>
<div class="item"><div class="item-inner">Tango</div></div>
<div class="item"><div class="item-inner">Uniform</div></div>
<div class="item"><div class="item-inner">Victor</div></div>
<div class="item"><div class="item-inner">Whiskey</div></div>
<div class="item"><div class="item-inner">X-ray</div></div>
<div class="item"><div class="item-inner">Yankee</div></div>
<div class="item"><div class="item-inner">Zulu</div></div>
<div class="item"><div class="item-inner">Alpha</div></div>
<div class="item"><div class="item-inner">Bravo</div></div>
<div class="item"><div class="item-inner">Charlie</div></div>
<div class="item"><div class="item-inner">Delta</div></div>
<div class="item"><div class="item-inner">Echo</div></div>
<div class="item"><div class="item-inner">Foxtrot</div></div>
<div class="item"><div class="item-inner">Golf</div></div>
<div class="item"><div class="item-inner">Hotel</div></div>
<div class="item"><div class="item-inner">India</div></div>
<div class="item"><div class="item-inner">Juliet</div></div>
<div class="item"><div class="item-inner">Kilo</div></div>
<div class="item"><div class="item-inner">Lima</div></div>
<div class="item"><div class="item-inner">Mike</div></div>
<div class="item"><div class="item-inner">November</div></div>
<div class="item"><div class="item-inner">Oscar</div></div>
<div class="item"><div class="item-inner">Papa</div></div>
<div class="item"><div class="item-inner">Quebec</div></div>
<div class="item"><div class="item-inner">Romeo</div></div>
<div class="item"><div class="item-inner">Sierra</div></div>
<div class="item"><div class="item-inner">Tango</div></div>
<div class="item"><div class="item-inner">Uniform</div></div>
<div class="item"><div class="item-inner">Victor</div></div>
<div class="item"><div class="item-inner">Whiskey</div></div>
<div class="item"><div class="item-inner">X-ray</div></div>
<div class="item"><div class="item-inner">Yankee</div></div>
<div class="item"><div class="item-inner">Zulu</div></div>
</div>
</div>
</div>
</div>
<!-- <script src="https://unpkg.com/intersection-observer@0.4.2/intersection-observer.js"></script> -->
<script>
(function () {
function jsonifyRect(rect) {
return {
top: rect.top,
left: rect.left,
bottom: rect.bottom,
right: rect.right,
height: rect.height,
width: rect.width
}
}
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function(entry) {
var intersecting = typeof entry.isIntersecting === 'boolean' ?
entry.isIntersecting : (entry.intersectionRatio > 0)
entry.target.classList.toggle('highlighted', intersecting)
document.querySelector('.output').innerText = JSON.stringify({
isIntersecting: entry.isIntersecting,
intersectionRatio: entry.intersectionRatio,
time: entry.time,
rootBounds: jsonifyRect(entry.rootBounds),
boundingClientRect: jsonifyRect(entry.boundingClientRect),
target: "<HTMLElement>"
}, null, ' ').replace("\"<HTMLElement>\"", "<HTMLElement>")
})
}, {
root: document.querySelector('.container'),
rootMargin: '-150px 0px -150px 0px'
})
Array.from(document.querySelectorAll('.item')).forEach(function (item) {
observer.observe(item)
})
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment