.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