망고보드 아이프레임 내 모션 효과

mangoMotion.ts

import { RefObject, useEffect, useRef } from 'react'

export const applyMangoMotion = (iframeRef: RefObject<HTMLIFrameElement>) => {
  if (!iframeRef.current) return

  const iframe = iframeRef.current
  const iframeWin = iframe.contentWindow || iframe
  const iframeDoc = iframe.contentDocument || (iframeWin as any).document

  const style = iframeDoc.createElement('style')
  style.type = 'text/css'
  style.append(injectStyle)
  iframeRef.current?.contentDocument?.documentElement.appendChild(style)

  const script = iframeDoc.createElement('script')
  script.type = 'text/javascript'
  script.append(injectScript)
  iframeRef.current?.contentDocument?.documentElement.appendChild(script)
}

const injectStyle = `[data-reversal="false"] > * > *:not(:first-child) {
  margin-top: 150px;
  opacity: 0;
  transition: 1s margin-top ease, 1s opacity ease;
}
[data-reversal="false"] > * > *:not(:first-child).active{
  margin-top: 0;
  opacity: 1;
}
body, html {
  background-color: white !important;
}
`
const injectScript = `var selector = "[data-reversal='false'] > * > *:not(:first-child)";
var isLoaded = false;
function loadChecker() {
  var reveals = document.querySelectorAll(selector);
  if (reveals.length > 0) {
    isLoaded = true;
  }
  if (!isLoaded) {
    setTimeout(loadChecker, 100);
  } else {
    reveal();
  }
}

function reveal() {
  var reveals = document.querySelectorAll(selector);
  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 0;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("mousewheel", reveal);
window.addEventListener("keydown", reveal);
window.addEventListener("touchmove", reveal);
window.addEventListener("resize", reveal);
loadChecker();`

아래와 같이 iframe 의 onLoad 에 명시해서 사용하면 적용됩니다.

<iframe
  className="h-full w-full"
  src="https://..."
  onLoad={() => applyMangoMotion(iframeRef)}
/>