3D Text Scrolling Effect using CSS and Custom jQuery

Text Animation Effects | December 11, 2020

This tutorial blog to learn how to create how to create 3d text scrolling effect using CSS and custom jQuery.

Video tutorial of Text Scrolling Effect using CSS and Custom jQuery

This tutorial video to learn how to create how to create 3d text scrolling effect using CSS and custom jQuery.

Text Scrolling Effect using CSS and Custom jQuery[Source Codes]

This source code can help you to create Text Scrolling Effect using CSS and Custom jQuery

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">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="main_box">
	<div class="outer_box">
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
		<div class="in_box">
			<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</p>
		</div>
	</div>
</div>




<script type="text/javascript" src="js/jquery-3.1.1.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: #000;
}

.main_box{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
}
.outer_box{
	width: 800px;
	height: 100px;
	position: relative;
	transform: perspective(2000px) rotateX(0deg);
	transform-style: preserve-3d;
	transition: all 1s ease-out;
	
}
.in_box{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
}
.in_box p{
	margin: 0;
	padding: 10px;
	text-align: center;
	font-size: 20px;
	color: #000;
}
.in_box:nth-child(1){ transform: rotateX(0deg) translateZ(300px); }
.in_box:nth-child(2){ transform: rotateX(30deg) translateZ(300px); }
.in_box:nth-child(3){ transform: rotateX(60deg) translateZ(300px); }
.in_box:nth-child(4){ transform: rotateX(90deg) translateZ(300px); }
.in_box:nth-child(5){ transform: rotateX(120deg) translateZ(300px); }
.in_box:nth-child(6){ transform: rotateX(150deg) translateZ(300px); }
.in_box:nth-child(7){ transform: rotateX(180deg) translateZ(300px); }
.in_box:nth-child(8){ transform: rotateX(210deg) translateZ(300px); }
.in_box:nth-child(9){ transform: rotateX(240deg) translateZ(300px); }
.in_box:nth-child(10){ transform: rotateX(270deg) translateZ(300px); }
.in_box:nth-child(11){ transform: rotateX(300deg) translateZ(300px); }
.in_box:nth-child(12){ transform: rotateX(330deg) translateZ(300px); }

JavaScript Code

Copy

var counter = 0;
$(document).bind("mousewheel",function(event){
	if(event.originalEvent.wheelDelta > 0){
		counter -= 10;
		console.log(counter);
		$(".outer_box").css({"transform":"perspective(2000px) rotateX("+counter+"deg)"})
	}else{
		counter += 10;
		console.log(counter);
		$(".outer_box").css({"transform":"perspective(2000px) rotateX("+counter+"deg)"})
	}


})

3D Text Scrolling Effect using CSS and Custom jQuery

Video tutorial of Text Scrolling Effect using CSS and Custom jQuery

Text Scrolling Effect using CSS and Custom jQuery[Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Best way to create animated loaders using CSS