assets/js/article-lazy.js


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

document.addEventListener('DOMContentLoaded', function () {
  var timeline = document.querySelector('ol.timeline');
  if (!timeline) return;

  // Progressive enhancement: activates CSS hidden state
  timeline.classList.add('js-lazy-timeline');

  var items = Array.prototype.slice.call(
    timeline.querySelectorAll('.timeline-item')
  );

  function reveal(item) {
    item.classList.add('is-visible');
  }

  var observer = new IntersectionObserver(
    function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          reveal(entry.target);
          observer.unobserve(entry.target);
        }
      });
    },
    {
      rootMargin: '-80px 0px 0px 0px',
      threshold: 0.12,
    }
  );

  items.forEach(function (item) {
    observer.observe(item);
  });
});