https://tecidoskite.com.br/wp-content/themes/tecidoskite/assets/js…?ver=e7e10faf67b54c017dd06f033c6fbca0

1/**
2 * instagram.js — Carrossel infinito via CSS animation
3 * O JS só:
4 *  - Clona os items (uma vez)
5 *  - Calcula a largura e define --scroll-width (uma vez + resize)
6 *  - Pausa/retoma a animação CSS via animation-play-state
7 *  - Respeita prefers-reduced-motion
8 */
9
10document.addEventListener('DOMContentLoaded', () => {
11
12  const track = document.querySelector('.instagram-section__track');
13  const carousel = document.querySelector('.instagram-section__carousel');
14  const section = document.querySelector('.instagram-section');
15  if (!track || !carousel || !section) return;
16
17  const prefersReducedMotion = window.matchMedia(
18    '(prefers-reduced-motion: reduce)'
19  ).matches;
20
21  if (prefersReducedMotion) return;
22
23  // ─── Clonar items para loop seamless ─────────────────────────
24  const items = [...track.children];
25  const fragment = document.createDocumentFragment();
26  items.forEach((item) => fragment.appendChild(item.cloneNode(true)));
27  track.appendChild(fragment);
28
29  // ─── Calcular largura e definir CSS custom property ──────────
30  function setScrollWidth() {
31    const gap = parseFloat(window.getComputedStyle(track).gap) || 0;
32    let w = 0;
33    for (let i = 0; i < items.length; i++) {
34      w += track.children[i].offsetWidth + gap;
35    }
36    track.style.setProperty('--scroll-width', `-${w}px`);
37  }
38
39  setScrollWidth();
40
41  let resizeTimer;
42  window.addEventListener('resize', () => {
43    clearTimeout(resizeTimer);
44    resizeTimer = setTimeout(setScrollWidth, 200);
45  });
46
47  // ─── Ativar animação CSS ─────────────────────────────────────
48  track.classList.add('is-scrolling');
49
50  // ─── Pausar ao hover e focus ─────────────────────────────────
51  carousel.addEventListener('mouseenter', () => {
52    track.style.animationPlayState = 'paused';
53  });
54  carousel.addEventListener('mouseleave', () => {
55    track.style.animationPlayState = 'running';
56  });
57  carousel.addEventListener('focusin', () => {
58    track.style.animationPlayState = 'paused';
59  });
60  carousel.addEventListener('focusout', () => {
61    track.style.animationPlayState = 'running';
62  });
63
64  // ─── Pausar quando fora da viewport ──────────────────────────
65  const observer = new IntersectionObserver(
66    ([entry]) => {
67      track.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';
68    },
69    { threshold: 0.1 }
70  );
71
72  observer.observe(section);
73
74});