MENU

Journal

  1. home
  2. Journal
12
function easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; } function setUpSlider(slider) { const columns = slider.querySelectorAll('.swell-block-column'); const columnWidth = columns[0].getBoundingClientRect().width; const columnGap = 24; // 左右の余白の値 const sliderWidth = (columnWidth + columnGap) * columns.length; columns.forEach(column => { const columnClone = column.cloneNode(true); slider.appendChild(columnClone); }); let scrollPosition = 0; slider.scrollLeft = scrollPosition; const scrollDuration = 2000; //スクロールする速度 const pauseDuration = 2000; //スクロールで一時停止する秒数 let startTime; function autoScroll(timestamp) { if (!startTime) startTime = timestamp; const elapsed = timestamp - startTime; const progress = Math.min(elapsed / scrollDuration, 1); const easedProgress = easeInOutQuad(progress); const targetPosition = scrollPosition + columnWidth + columnGap; slider.scrollLeft = scrollPosition + (targetPosition - scrollPosition) * easedProgress; if (progress === 1) { scrollPosition = targetPosition; if (scrollPosition >= sliderWidth) { scrollPosition = 0; slider.scrollLeft = scrollPosition; } startTime = null; setTimeout(() => { requestAnimationFrame(autoScroll); }, pauseDuration); } else { requestAnimationFrame(autoScroll); } } autoScroll(); } document.addEventListener('DOMContentLoaded', () => { const sliders = document.querySelectorAll('.auto-slide .swell-block-columns__inner'); sliders.forEach(setUpSlider); });