Clip-Path Image Scroll Animation using HTML CSS and jQuery

3D & Animation Library | December 30, 2022

Today in this blog you’ll learn how to create Clip-Path Image Scroll Animation using HTML CSS and jQuery. I use HTML CSS and jQuery to create this Clip-Path Image Scroll Animation Effect. When you scroll this web page then images open one by one with round shape.

Video tutorial of Clip-Path Image Scroll Animation using HTML CSS and jQuery

This tutorial video can help you to create Clip-Path Image Scroll Animation.

You might like this

Clip-Path Image Scroll Animation using HTML CSS and jQuery [Source Codes]

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="box_wrap">
	<div class="box1" id="box1" style="background-image: url('images/pic1.jpg');"></div>
	<div class="box1" id="box2" style="background-image: url('images/pic2.jpg');"></div>
	<div class="box1" id="box3" style="background-image: url('images/pic3.jpg');"></div>
</div>
<div class="scroller"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	color: #000;
}

.box1{
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-position: center center; 
	clip-path:circle(20%);
	clip-path:circle(0%);
	position: fixed;
	left: 0;
	top: 0;
}
#box2{z-index: 1}
#box3{z-index: 2}

JavaScript Code

Copy

windowHeight =  $(window).height();

allBoxLength = $('.box1').length;
boxLength = allBoxLength * 2;
scrollerHeight = windowHeight * allBoxLength;
$('.scroller').height(scrollerHeight + windowHeight)

$(document).on('scroll',function() {
	winScrolltop = $(window).scrollTop();
	
	if(winScrolltop > -1 && winScrolltop < windowHeight){
		$('#box1').css({"clipPath":'circle('+winScrolltop/boxLength+'%)'});
		$('#box2').css({"clipPath":'circle('+0+'%)'})
		windowHeight2 = windowHeight + windowHeight;
	}else if(winScrolltop > windowHeight && winScrolltop < windowHeight2){
		winScrolltop = winScrolltop - windowHeight;
		$('#box2').css({"clipPath":'circle('+winScrolltop/boxLength+'%)'})
		$('#box3').css({"clipPath":'circle('+0+'%)'})
		windowHeight3 = windowHeight2 + windowHeight;
	}else if(winScrolltop > windowHeight2 && winScrolltop < windowHeight3){
		winScrolltop = winScrolltop - windowHeight2
		$('#box3').css({"clipPath":'circle('+winScrolltop/boxLength+'%)'})
	}
})