(function () { var doc = document; var root = doc.documentElement; // classNameはReactがハイドレーション時に巻き戻すため、 // Reactが管理していない属性で印をつける root.setAttribute("data-motion", "on"); var reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; // 動きを減らす設定のときはCSS側が完成状態にするので、何もしない if (reduced) return; function show(el) { if (el.hasAttribute("data-revealed")) return; el.setAttribute("data-revealed", ""); if (el.hasAttribute("data-countup")) countUp(el); } function showGroup(g) { if (g.hasAttribute("data-revealed")) return; g.setAttribute("data-revealed", ""); var kids = g.querySelectorAll("[data-reveal], [data-countup]"); for (var k = 0; k < kids.length; k++) show(kids[k]); } /** * 取りこぼしの拾い直し。 * IntersectionObserver は1フレームに1回しか判定しないため、 * 勢いよくスクロールして要素が1フレームで画面を通り抜けると * 「入った」と報告されないまま素通りし、その要素は隠れたままになる。 * 通過済み(トリガー位置より上)の未再生要素をここで出し切る。 */ function sweep() { var h = window.innerHeight || 0; var groups = doc.querySelectorAll("[data-reveal-group]:not([data-revealed])"); var i; for (i = 0; i < groups.length; i++) { var anchor = groups[i].querySelector("[data-reveal-anchor]") || groups[i]; if (anchor.getBoundingClientRect().top < h * 0.5) showGroup(groups[i]); } var pending = doc.querySelectorAll( "[data-reveal]:not([data-revealed]), [data-countup]:not([data-revealed])" ); for (i = 0; i < pending.length; i++) { var el = pending[i]; if (el.closest("[data-reveal-group]")) continue; if (el.getBoundingClientRect().top < h * 0.88) show(el); } } function countUp(el) { var raw = el.getAttribute("data-countup") || ""; var target = parseFloat(raw.replace(/[^0-9.-]/g, "")); var anim = el.querySelector(".countup__anim"); if (!anim || isNaN(target)) return; var decimals = (raw.split(".")[1] || "").length; var grouped = raw.indexOf(",") !== -1; var prefix = (raw.match(/^[^0-9.-]+/) || [""])[0]; var suffix = (raw.match(/[^0-9.-]+$/) || [""])[0]; function render(v) { var body = decimals ? v.toFixed(decimals) : String(Math.round(v)); if (grouped) { var parts = body.split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); body = parts.join("."); } anim.textContent = prefix + body + suffix; } var duration = 1200; var start = 0; el.setAttribute("data-counting", ""); render(0); function step(now) { if (!start) start = now; var p = Math.min((now - start) / duration, 1); // easeOutCubic render(target * (1 - Math.pow(1 - p, 3))); if (p < 1) { requestAnimationFrame(step); } else { el.removeAttribute("data-counting"); anim.textContent = ""; } } requestAnimationFrame(step); } function initScroll() { var items = doc.querySelectorAll("[data-parallax]"); var ticking = false; function update() { ticking = false; sweep(); var h = window.innerHeight || 0; for (var i = 0; i < items.length; i++) { var el = items[i]; var r = el.getBoundingClientRect(); if (r.bottom < -200 || r.top > h + 200) continue; var amount = parseFloat(el.getAttribute("data-parallax")) || 8; // 要素が画面を通過する割合を -1..1 に均して、ごく浅く動かす var progress = (r.top + r.height / 2 - h / 2) / (h / 2 + r.height / 2); if (progress > 1) progress = 1; if (progress < -1) progress = -1; el.style.setProperty("--parallax", (progress * amount).toFixed(2) + "px"); } } function onScroll() { if (ticking) return; ticking = true; requestAnimationFrame(update); } update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); // 画像の読み込みで高さが変わった後にも一度ならす window.setTimeout(sweep, 1200); } function init() { var all = doc.querySelectorAll("[data-reveal], [data-countup]"); var groups = doc.querySelectorAll("[data-reveal-group]"); var i; if (!("IntersectionObserver" in window)) { for (i = 0; i < all.length; i++) show(all[i]); return; } // グループの中身は個別に観測しない。グループの合図でまとめて出し、 // 見せる順番は各要素の --reveal-delay で付ける var singles = []; for (i = 0; i < all.length; i++) { if (!all[i].closest("[data-reveal-group]")) singles.push(all[i]); } var io = new IntersectionObserver( function (entries) { for (var j = 0; j < entries.length; j++) { if (!entries[j].isIntersecting) continue; io.unobserve(entries[j].target); show(entries[j].target); } }, { rootMargin: "0px 0px -12% 0px", threshold: 0.01 } ); for (i = 0; i < singles.length; i++) io.observe(singles[i]); // グループは、中の [data-reveal-anchor](無ければグループ自身)が // 画面の縦半分より上まで来てから再生する。 // 下端を50%削った枠と重なったときが、その瞬間にあたる。 if (groups.length) { var groupIO = new IntersectionObserver( function (entries) { for (var j = 0; j < entries.length; j++) { if (!entries[j].isIntersecting) continue; groupIO.unobserve(entries[j].target); var g = entries[j].target.closest("[data-reveal-group]"); if (g) showGroup(g); } }, { rootMargin: "0px 0px -50% 0px", threshold: 0 } ); for (i = 0; i < groups.length; i++) { groupIO.observe( groups[i].querySelector("[data-reveal-anchor]") || groups[i] ); } } initScroll(); } if (doc.readyState === "loading") { doc.addEventListener("DOMContentLoaded", init); } else { init(); } })();

まずは、話してみませんか。

お問い合わせフォーム