Exploring the clip-path feature of CSS has been a fun experiment for me. I have successfully implemented it in my project and am now trying to incorporate JavaScript to dynamically change the start/stop positions of the clip-path. Below is a snippet of my CSS:
.background-left {
width: 100%;
background-color: #ff8800;
background: url("someimage.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
transition: all 1s ease;
-webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}
My objective is to create an experience where clicking on a button triggers a fade out effect on all content, shifts the start/stop points of the clip-path to reveal the entire image, and then navigates to a new page. Below is the corresponding JavaScript code:
$( "#button" ).click(function() {
$("#content").fadeOut(2000).delay(400).queue(function() {
$(".background-left").css("-webkit-clip-path", "polygon(0 0, 100% 0, 100%, 100%, 0 100%)").delay(1000).queue(function() {
window.location.href = "portraits.html";
});
});
});
As a newcomer to JavaScript and jQuery, I acknowledge that my approach may not be the most efficient. After spending hours searching online for a solution, I haven't been able to find one.
I would appreciate any guidance on what I might be overlooking.