change clip path smoothly on scroll

Question

<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;

Hello,

my goal is to smoothly change the shape of a clipped image on scroll. My approach was to simply switch between the two css properties on scroll but this does not work. (By the way this works perfectly with :hover on the initial css property)

Any hints are highly appreciated and would mean a lot to me!

Temani Afif · Accepted Answer · 2018-01-10T19:08:59.617

1

You have error in your code, the hasClass() function doesn't take a selector but only the class name :

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>

By the way you can optimize your logic by simply using 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>

Here is a trigger on scroll event:

$(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>

edited Jan 10 '18 at 19:08

answered Dec 06 '17 at 09:59

Temani Afif

180,975
14
166
216

Thanks a lot for your help! Is it possible to change from onclick to a scroll triggered event? – Jakob Jan 10 '18 at 12:46
@Jakob yes you can ;) i added an example into my answer .. but a very simple one that you have to adjust as per your needs – Temani Afif Jan 10 '18 at 13:25
Perfect :)! But this still does not work on scroll of a specific div :/ and I cant figure out why.. but nevermind sometime i will find out. Thanks again for your help – Jakob Jan 10 '18 at 17:44
1

As I said :D I figured out how to make this effect on scroll of a div... I just had to position the script some further down in my code :) – Jakob Jan 10 '18 at 17:47
Do you have a clue how to trigger the scroll event only when scrolled down and the reverse the whole thing again when scrolled back to top? Such as if I would use toggleClass. :) – Jakob Jan 10 '18 at 18:20
@Jakob you can use the scroll event of document and test the position of scroll. Like we do with fixed menu for example ... if the scroll top is bigger than a value you add the class if less you remove it. Refer to this https://stackoverflow.com/questions/5371139/window-scrolltop-vs-document-scrolltop – Temani Afif Jan 10 '18 at 19:03
@Jakob i edited my last example you can have a look ;) – Temani Afif Jan 10 '18 at 19:09
You basically made my day :D I'm a beginner and I was struggling for a long time with this issue!! – Jakob Jan 10 '18 at 20:52
@Jakob great, don't hesitate if you still have issue and also to mark answer as accepted if it fixes the issue ;) – Temani Afif Jan 10 '18 at 20:53

change clip path smoothly on scroll

1 Answers1