Javascript 在滚动上平滑地更改剪辑路径 $（“flexbox.center”）。滚动（changeClass）； 函数changeClass（）{ if（$（“#封面照片”）.hasClass（“.coverphoto”））{ $（“#封面照片”）.removeClass（“封面照片”）.addClass（“新闻形状”）； } 否则{ $（“#封面照片”）.removeClass（“newshape”）.addClass（“封面照片”）； } } 剪辑路径：多边形（0%0%，100%0%，100%38.5%，28.5%65%，0.65%）； 过渡：0.5s缓进缓出； ----- 剪辑路径：多边形（0%0%，100%0%，100%53%，41%53%，053%）； 过渡：0.5s缓进缓出；

你好,

我的目标是平滑地改变卷轴上剪辑图像的形状。 我的方法是简单地在scroll上的两个css属性之间切换，但这不起作用。（顺便说一句，这非常适用于：将鼠标悬停在初始css属性上）

---

任何提示都非常感谢，对我来说意义重大

如果代码中有错误，

hasClass（）

函数不接受选择器，只接受类名：

函数changeClass（）{
如果（$（“#封面”）.hasClass（'coverphoto'））{
$（“封面”）.removeClass（“封面照片”）.addClass（“新闻形状”）；
}否则{
$（“#封面”）.removeClass（“newshape”）.addClass（“封面照片”）；
}
}

.coverphoto{
剪辑路径：多边形（0%0%，100%0%，100%38.5%，28.5%65%，0.65%）；
过渡：0.5s缓进缓出；
}
.新闻形态{
剪辑路径：多边形（0%0%，100%0%，100%53%，41%53%，053%）；
过渡：0.5s缓进缓出；
}

更改

非常感谢您的帮助！是否可以从onclick更改为滚动触发事件？@Jakob是的，您可以；）我在回答中加了一个例子。。但是一个非常简单的，你必须根据你的需要进行调整的例子：）！但这在特定div:/的卷轴上仍然不起作用，我也不明白为什么。。但不管怎样，总有一天我会发现的。再次感谢您的帮助，正如我所说：D我想出了如何在一个div的卷轴上产生这种效果。。。我只需要在代码中把脚本放得更靠下一点：）你知道如何在向下滚动时触发scroll事件，在返回顶部时再次反转整个事件吗？例如，如果我使用toggleClass.：）

<script>     
$("flexbox.center").scroll(changeClass);

function changeClass() {
    if($("#coverphoto").hasClass('.coverphoto')){
        $("#coverphoto").removeClass("coverphoto").addClass("newshape");
    }
    else{
        $("#coverphoto").removeClass("newshape").addClass("coverphoto");
    }
}       
 </script>


clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
-----
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
transition: 0.5s ease-in-out;