/*HTML*/
<div class="clip-path mask wow" data-wow-offset="200">
<img src="your-image.jpg">
</div>
/* CSS */
.clip-path {
width: 100%;
height: auto;
clip-path: inset(0 0 96% 0%);
}
@keyframes mask {
0%{
clip-path: inset(0 90% 96% 0%);
}
50%{
clip-path: inset(0 0 96% 0%);
}
55%{
clip-path: inset(0 0 90% 0%);
}
100%{
clip-path: inset(0 0 0 0);
}
}
.mask {
-webkit-animation-name: mask;
animation-name: mask;
}
You can use WOW.js to reveal only when the window scroll to div.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.