Let’s create an easy but awesome clip-path animation in less than a minute!
If you prefer to watch the video version, it's right here :
1. The HTML structure.
Create two boxes with one image inside each one.
<div class="box b1">
<img src="img1.jpg">
</div>
<div class="box b2">
<img src="img2.jpg">
</div>
2. Style the page.
First resize each box to take up the full height of the viewport:
.box{
height: 100vh;
}
Then add a different background colour to each box to differentiate them easily:
.b1{
background-color: #e27d60;
}
.b2{
background-color: #85cdca;
}
Now, size the images however you want, center them and fix them to the middle of the screen, following the scroll:
img{
object-fit: cover;
height: 600px;
width: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
}
For now, the images are one above the other. To fix that, you need to clip the boxes so that only the correct image shows:
.box{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
The values inside of the parentheses correspond to the X and Y coordinates of the clipped area.
It will create a new stacking context for each box and only show what is inside that stacking context.
You’ll now have a lovely animation to showcase your images!
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
See you soon!
Enzo.
Top comments (0)