'; return el; } function startAnimation() { pinsLayer.innerHTML = ''; fill.style.width = '0%'; caption.textContent = 'お祭りを集めています'; pinEls = makePositions(TOTAL).map(function(p) { var el = buildPin(p); pinsLayer.appendChild(el); return el; }); var lit = 0; function lightNext() { if (lit >= pinEls.length) return; var el = pinEls[lit]; el.classList.add('lit'); el.style.transform = 'translate(-50%, -100%) scale(1)'; el.style.opacity = '1'; lit++; fill.style.width = Math.round((lit / pinEls.length) * 100) + '%'; } if (reduce) { pinEls.forEach(function(el) { el.classList.add('lit'); el.style.transform = 'translate(-50%, -100%) scale(1)'; el.style.opacity = '1'; }); fill.style.width = '100%'; } else { var i = 0; (function step() { lightNext(); if (++i < pinEls.length) timer = setTimeout(step, 150 + Math.max(0, 120 - i * 5)); })(); } } function finish() { if (finished) return; finished = true; var wait = Math.max(0, MIN_DURATION - (Date.now() - startedAt)); setTimeout(function() { if (timer) clearTimeout(timer); caption.textContent = 'まもなく表示します'; root.classList.add('is-done'); // root.remove() は呼ばない: React管理のDOMノードを直接削除するとページ遷移時にエラーになる root.addEventListener('transitionend', function() { root.style.display = 'none'; }, { once: true }); setTimeout(function() { root.style.display = 'none'; }, 800); }, wait); } function reset() { if (!finished && root.style.display !== 'none') return; if (timer) clearTimeout(timer); finished = false; startedAt = Date.now(); root.classList.remove('is-done'); root.style.display = 'flex'; startAnimation(); } if (document.documentElement.dataset.showLoader === 'true') { startAnimation(); } else { root.style.display = 'none'; } window.HitomoshiLoader = { finish: finish, reset: reset, el: root }; })();

お問い合わせ

メールアドレス

件名テンプレート

本文テンプレート