【swellカスタマイズ】javascript/cssだけで変な動きのあるページを作る

/*スクロールスパイで利用*/
a.p-toc__link.active, a.p-toc__link:hover {
color:white;
background-color:black;
font-weight:bold;
}

/* MOVE FADE */
.slideview {
  opacity: 0;
}

.slideview.on {
  opacity: 1;
}

.LL-MOVE.on {
  animation: slideInL forwards 2s;
}
.RR-MOVE.on {
  animation: slideInR forwards 2s;
}

.UU-MOVE.on {
  animation: slideInU forwards 2s;
}

.DD-MOVE.on {
  animation: slideInD forwards 2s;
}

.MFADE.on {
  animation: fade forwards 4s;
}

.ofade {
  animation: fade forwards 1s;
}



.FLAT-MOVE {
transform-origin: center bottom;
transform: rotateX(-90deg);
}

.FLAT-MOVE.on {
transition: all 1s ease-in-out;
transform: rotateX(0deg);
}

.FLAT-TOP-MOVE {
 transform-origin: center top;
 transform: rotateX(-90deg);
}

.FLAT-TOP-MOVE.on {
  transition: all 3s ease-in-out;
  transform: rotateX(0deg);
}

.FF-MOVE.on {
  transition: all 1s ease-in-out;
  transform: rotate(360deg);
}


@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.tsL {
  animation: slideInL forwards 0.5s;
}

@keyframes slideInL {
  0% {
    opacity: 0;
    transform: translateX(-140px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tsR {
  animation: slideInR forwards 0.5s;
}

.tsRR {
  animation: slideInR forwards 2s;
}

@keyframes slideInR {
  0% {
    opacity: 0;
    transform: translateX(140px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tsU {
  animation: slideInU forwards 0.5s;
}

@keyframes slideInU {
  0% {
    opacity: 0;
    transform: translateY(-140px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tsD {
  animation: slideInD forwards 0.5s;
}

@keyframes slideInD {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.INBK {
  display: inline-block;
}

.border {
  position: relative;
}

.borderl {
  position: relative;
}

.borderl.on {
  /* 追加のスタイルプロパティ */
}

.borderl.on:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px #0f6aaa;
  animation: border_anim 2s linear forwards;
}

.border.on:before {
  opacity: 1;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px #0f6aaa;
  transform: translateX(-50%);
  animation: border_anim 2s linear forwards;
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

<script>
//scrool spy and .slideview use
document.addEventListener('DOMContentLoaded', function() {
    const sview = document.querySelectorAll('.slideview, .swl-format-1, .swl-format-2');
    const sections = Array.from(document.querySelectorAll('h2, h3, h4, h5'));
    let adj = window.innerHeight * 0.1;
    let rafId = null;
    let lastScrollTop = 0;

    function getTopPositions(elements) {
        return Array.from(elements, el => el.getBoundingClientRect().top + window.pageYOffset);
    }

    let svTop = getTopPositions(sview);
    let sectionsTop = getTopPositions(sections);

    function updateAdjAndSvAndSectionsTop() {
        adj = window.innerHeight * 0.1;
        svTop = getTopPositions(sview);
        sectionsTop = getTopPositions(sections);
    }

    window.addEventListener('resize', updateAdjAndSvAndSectionsTop);

    function toggleActiveClass(links, isActive) {
        links.forEach(link => {
            if (isActive) {
                link.classList.add('active');
            } else {
                link.classList.remove('active');
            }
        });
    }

    function handleScroll() {
        if (rafId) {
            return;
        }

        rafId = requestAnimationFrame(() => {
            const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;

            if (Math.abs(scrollPos - lastScrollTop) < 1) {
                rafId = null;
                return;
            }

            lastScrollTop = scrollPos;

            sections.forEach((section, i) => {
                const navLinks = document.querySelectorAll(`a[href="#${section.id}"].p-toc__link`);
                const isActive = scrollPos + window.innerHeight - adj >= sectionsTop[i] && (i === sections.length - 1 || scrollPos + window.innerHeight - adj < sectionsTop[i + 1]);
                toggleActiveClass(navLinks, isActive);
            });

            sview.forEach((el, i) => {
                if (scrollPos + window.innerHeight - adj > svTop[i]) {
                    el.classList.add('on');
                } else {
                    el.classList.remove('on');
                }
            });

            rafId = null;
        });
    }

    window.addEventListener('scroll', handleScroll);

    updateAdjAndSvAndSectionsTop();

    const observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                handleScroll();
            }
        }
    });

    const tocElements = document.querySelectorAll('.toc');
    tocElements.forEach(toc => observer.observe(toc, { childList: true, subtree: true }));
});
</script>

.swl-format-1{
display: inline-block;
font-weight:bold;
}

.swl-format-2{
 display: inline-block;
 position: relative;
font-weight:bold;
}

.swl-format-2.on:before {
  opacity: 1;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px #0f6aaa;
  transform: translateX(-50%);
  animation: underline_anim 2s forwards;
}

@keyframes underline_anim {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}