Image Circle Slider On Scroll Using Custom jQuery and CSS

Creative jQuery | January 29, 2021

This tutorial blog can help you to create circle slider on scroll using jQuery and CSS.

Video tutorial of Image Circle Slider On Scroll Using Custom jQuery and CSS

This tutorial video can help you to create circle slider on scroll using jQuery and CSS.

You might like this

Image Circle Slider On Scroll Using Custom jQuery and CSS [Source Codes]

This source code can help you to create Image Circle Slider On Scroll Using Custom jQuery and CSS.

jQuery library source

You can also download this source code through the given link. Click here to download source code

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="main_box">
	<div class="proBox active">
		<figure style="background-image: url(https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1518098268026-4e89f1a2cd8e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=668&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1445998559126-132150395033?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=375&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1445263732967-1c0ea8741925?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1453959022778-cfda85dbe0f9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1466129646777-494b376a670c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1448518340475-e3c680e9b4be?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=751&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
	<div class="proBox">
		<figure style="background-image: url(https://images.unsplash.com/photo-1448518340475-e3c680e9b4be?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=751&q=80);"></figure>
		<div class="description">
			<h3>Lorem ipsum dolor</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.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: #039682;
	color: #fff;
	min-height: 100vh;
	display: flex;
	align-items: center;
	/*justify-content: space-around;*/
	overflow: hidden;
}

.main_box{
	/*width: 5px;
	height: 5px;*/
	width: 0px;
	height: 0px;
	background:red;
	position: relative;
	transform: rotate(0deg);
	transition: all 0.3s ease-out;
}
.main_box *{ transition: all 0.3s ease-out; }
.proBox{
	/*background:red ;*/
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	
	
}
.proBox figure{
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-blend-mode: darken;
	background-color: rgba(0,0,0,0.8);
	clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0 85%);
}
.description{
	position: absolute;
	left: 100%;
	top: 0;
	bottom: 0;
	width: 250%;
	font-size: 19px;
	padding: 20px;
	text-align: justify;
	color: #797777;
	background: #8e8e8e;
}
.description h3{ margin: 0 0 10px; }
.description p{ margin: 0 }
.proBox.active figure{background-blend-mode: initial;}
.proBox.active .description{
	color: rgba(255,255,255,1);background:#045e52;
}

.proBox:nth-child(1){
	transform: translate(100% ,-50%) rotate(0deg);
}
.proBox:nth-child(2){
	transform: translate(55% ,-155%) rotate(-45deg);
}
.proBox:nth-child(3){
	transform: translate(-50% ,-200%) rotate(-90deg);
}
.proBox:nth-child(4){
	transform: translate(-155% ,-155%) rotate(-135deg);
}
.proBox:nth-child(5){
	transform: translate(-200% ,-50%) rotate(-180deg);
}
.proBox:nth-child(6){
	transform: translate(-155% ,55%) rotate(-225deg);
}
.proBox:nth-child(7){
	transform: translate(-50% ,100%) rotate(-270deg);
}
.proBox:nth-child(8){
	transform: translate(55% ,55%) rotate(-315deg);
}

JavaScript Code

Copy

var counter =0;
var proCount =0;
window.addEventListener('wheel',function(event){
  if (event.deltaY < 0) {

		counter += 45;
		proCount += 1;
		//console.log(counter2)
		$(".main_box").css({"transform":"rotate("+counter+"deg"});
		$(".proBox").removeClass('active');
		if(proCount > 7){proCount = 0}
		$(".proBox").eq(proCount).addClass('active');
		
	}else if (event.deltaY > 0) {	

		counter -= 45;
		proCount -= 1;
		//console.log(counter2)
		$(".main_box").css({"transform":"rotate("+counter+"deg"});
		$(".proBox").removeClass('active');
		if(proCount < -7 ){proCount = 0}
		$(".proBox").eq(proCount).addClass('active');

	}
})