document.addEventListener("DOMContentLoaded", function () { const targets = document.querySelectorAll( ".anosalo-blog-template .anosalo-scroll-block" ); if (!targets.length) { return; } /* * IntersectionObserver非対応ブラウザ */ if (!("IntersectionObserver" in window)) { targets.forEach(function (target) { target.classList.add( "anosalo-is-visible" ); }); return; } /* * スクロール監視 * * 画面の下側に入った要素を * 1ブロックずつ表示していく。 */ const observer = new IntersectionObserver( function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { entry.target.classList.add( "anosalo-is-visible" ); } else { /* * 画面外へ出たらリセット。 * * そのため、上へ戻った場合も * 再びFade Upする。 */ entry.target.classList.remove( "anosalo-is-visible" ); } }); }, { threshold: 0, /* * 下から30%程度入ったところで * アニメーションを開始する。 * * これによって、ページを開いた瞬間に * 下の要素まで一斉に動くことを防ぐ。 */ rootMargin: "0px 0px -30% 0px" } ); targets.forEach(function (target) { observer.observe(target); }); });