🕹 스크립트

js 스크롤하면 clip-path 움직이기

(。θᗨθ。) 2024. 2. 18. 16:02
.mainVisual {
	clip-path: polygon(0 0,0 75%,50% 75%,100% 75%, 100% 0);
    // clip-path: polygon(0 0, 0 75%, 50% 100%, 100% 75%, 100% 0);
}
$(window).scroll(function () {
    const mqlVisual = matchMedia("screen and (min-width: 1441px)");
    const $mainVisual = document.querySelector(".mainVisual");
    const $mainVisualScroll = 75 + window.scrollY / 35;
    if (mqlVisual.matches) {
      if ($mainVisualScroll <= 80) {
        $mainVisual.style.clipPath =
          "polygon(0 0,0 75%,50% 75%,100% 75%, 100% 0)";
      } else if ($mainVisualScroll <= 95) {
        $mainVisual.style.clipPath =
          "polygon(0 0, 0 75%, 50% " +
          $mainVisualScroll +
          "%, 100% 75%, 100% 0)";
      } else {
        $mainVisual.style.clipPath =
          "polygon(0 0, 0 75%, 50% 100%, 100% 75%, 100% 0)";
      }
    }
  });
728x90