blob: 026d1bed085115f93c2fdd3c51b1836a9bd671c3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
/**
* scroll-reveal.js
* IntersectionObserver for revealing elements on scroll.
* Adds 90ms stagger delay per sibling index within each reveal-group.
*/
export function initScrollReveal() {
'use strict';
const revealElements = document.querySelectorAll('.reveal');
if (!revealElements.length) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const el = entry.target;
const parent = el.parentElement;
const siblings = parent
? Array.from(parent.querySelectorAll(':scope > .reveal'))
: [];
const index = siblings.indexOf(el);
const delay = index >= 0 ? index * 90 : 0;
el.style.transitionDelay = delay + 'ms';
el.classList.add('revealed');
// Remove inline delay after transition so hover transitions are unaffected
const cleanup = () => {
el.style.transitionDelay = '';
el.removeEventListener('transitionend', cleanup);
};
el.addEventListener('transitionend', cleanup);
observer.unobserve(el);
});
}, { threshold: 0.1 });
revealElements.forEach((el) => observer.observe(el));
}
|
