在滚动时平滑地更改剪辑路径
change clip path smoothly on scroll
<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;
您好,
我的目标是在滚动时平滑地改变剪切图像的形状。
我的方法是简单地在滚动的两个 css 属性之间切换,但这不起作用。 (顺便说一下,这与 :hover 在初始 css 属性 上完美配合)
非常感谢任何提示,对我来说意义重大!
您的代码有误,hasClass()
函数没有选择器,只有 class 名称:
function changeClass() {
if ($("#cover").hasClass('coverphoto')) {
$("#cover").removeClass("coverphoto").addClass("newshape");
} else {
$("#cover").removeClass("newshape").addClass("coverphoto");
}
}
.coverphoto {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>
顺便说一句,您可以通过简单地使用 toggleClass()
来优化您的逻辑:
function changeClass() {
$("#cover").toggleClass("newshape");
}
.coverphoto {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>
这是滚动事件的触发器:
$(document).scroll(function() {
if ($(window).scrollTop() <= 150) {
$("#cover").removeClass("newshape");
} else {
$("#cover").addClass("newshape");
}
});
body {
height: 150vh;
}
.coverphoto {
position: fixed;
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<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;
您好,
我的目标是在滚动时平滑地改变剪切图像的形状。 我的方法是简单地在滚动的两个 css 属性之间切换,但这不起作用。 (顺便说一下,这与 :hover 在初始 css 属性 上完美配合)
非常感谢任何提示,对我来说意义重大!
您的代码有误,hasClass()
函数没有选择器,只有 class 名称:
function changeClass() {
if ($("#cover").hasClass('coverphoto')) {
$("#cover").removeClass("coverphoto").addClass("newshape");
} else {
$("#cover").removeClass("newshape").addClass("coverphoto");
}
}
.coverphoto {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>
顺便说一句,您可以通过简单地使用 toggleClass()
来优化您的逻辑:
function changeClass() {
$("#cover").toggleClass("newshape");
}
.coverphoto {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>
这是滚动事件的触发器:
$(document).scroll(function() {
if ($(window).scrollTop() <= 150) {
$("#cover").removeClass("newshape");
} else {
$("#cover").addClass("newshape");
}
});
body {
height: 150vh;
}
.coverphoto {
position: fixed;
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>