Compare commits
No commits in common. "30fd46b2134050b318362b88c2ff52fd5ed9e9ce" and "b9bcde8dd977216c34d22ce4a5077df08a9d8ef3" have entirely different histories.
30fd46b213
...
b9bcde8dd9
|
@ -1,19 +1,7 @@
|
||||||
(function() {
|
(function() {
|
||||||
const observeSelector = '.js-onscreen';
|
|
||||||
const observedNodes = document.querySelectorAll(observeSelector);
|
|
||||||
let observedCount = 0;
|
|
||||||
let observedTotal = !!observeSelector ? observedNodes.length : 0;
|
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', event => {
|
window.addEventListener('DOMContentLoaded', event => {
|
||||||
const intersectionSupport = !!window.IntersectionObserver;
|
const intersectionSupport = !!window.IntersectionObserver;
|
||||||
|
|
||||||
function updateObservedCount() {
|
|
||||||
observedCount++;
|
|
||||||
if (observedCount >= observedTotal) {
|
|
||||||
document.body.classList.add('observe-done');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onScreenHandler(entries) {
|
function onScreenHandler(entries) {
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
if (entry.intersectionRatio > 0) {
|
if (entry.intersectionRatio > 0) {
|
||||||
|
@ -24,7 +12,7 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
observedNodes.forEach(el => {
|
document.querySelectorAll('.js-onscreen').forEach(el => {
|
||||||
if (intersectionSupport) {
|
if (intersectionSupport) {
|
||||||
const options = {
|
const options = {
|
||||||
rootMargin: '0px',
|
rootMargin: '0px',
|
||||||
|
@ -34,7 +22,6 @@
|
||||||
observer.observe(el);
|
observer.observe(el);
|
||||||
el.classList.add('is-observed');
|
el.classList.add('is-observed');
|
||||||
}
|
}
|
||||||
updateObservedCount();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.l-section-wrapper {
|
.l-wrapper {
|
||||||
max-width: $column-max-width;
|
max-width: $column-max-width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-section-column {
|
.l-column {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
|
Loading…
Reference in New Issue