https://www.orangepage.net/wp-content/themes/orangepage/assets/js/borderInAnimation.js?ver=1790827487

1document.addEventListener('DOMContentLoaded', function () {
2  const elements = document.querySelectorAll('.border-in-animation');
3
4  const observer = new IntersectionObserver((entries) => {
5    entries.forEach(entry => {
6      if (entry.isIntersecting) {
7        entry.target.classList.add('borderIn');
8      }
9    });
10  }, {
11    threshold: 0.1,
12    rootMargin: window.innerWidth < 768 ? '-50px' : '-150px',
13  });
14
15  elements.forEach(el => {
16    // オプション属性による制御
17    const direction = el.dataset.direction || 'left';
18    const color = el.dataset.color || 'subtext';
19    const hidePc = el.dataset.hidePc === 'true';
20    const hideSp = el.dataset.hideSp === 'true';
21
22    el.classList.add(`bg-${color}`);
23    el.classList.add(`origin-${direction}`);
24    if (hidePc) el.classList.add('hide-pc');
25    if (hideSp) el.classList.add('hide-sp');
26
27    observer.observe(el);
28  });
29});