Bootstrap 4 homepage design with text animation

Hello friends. Today we will share with you another snippet of bootstrap. Today's project is the Bootstrap 4 homepage with CSS text animation. Before collecting the source code, I suggest you take a look at the video below. This will help you to understand the code. We've shared a lot of front-end-related videos on our YouTube channel. If you are interested in front-end development, you can subscribe to our channel.

I hope you have watched the video once and understood how the snippet was made with Bootstrap 4 and custom CSS. In this project, I have created a normal banner section without using the bootstrap slider and added an animated text effect. There are many JQuery text animation plugins available nowadays and, these can be easily implemented on a web layout. But we have only used Sis for text animation in our project. This animation shows how the letters of the text come down from top to bottom at each load and align nicely. CSS media queries have also been used to make the project responsive. This means that the snippet will look good even on small devices.

You may also like:

Bootstrap 4 Homepage with CSS text animation [ Source Code ]:

To create this project, you first need to create two files. The first file is the HTML file and the second file is the CSS file. In both cases, give the file extension correctly. Then add the bootstrap CDN or bootstrap CSS and js file to your project. Add the latest jquery file to your project. Then copy and paste the following code into your project. If you have any problem with the code below, then download the code from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">   
    <title>How To Make a Website with Bootstrap 4 | Homepage Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
		<div class="container">
			<a class="navbar-brand" href="#">Her<span>rald</span></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<!--change to ml-auto-->
					<li class="nav-item active">
						<a class="nav-link" href="#">Home</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">About</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Portfolio</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Services</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<header>
		<div class="container">
			<div class="banner-text">
				<div class="text-area">
					<span>a</span> <span>l</span> <span>e</span> <span>x</span>   <span>h</span> <span>u</span> <span>n</span> <span>t</span>
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae rerum autem placeat voluptatum, eius, eveniet.</p>
				<p class="banner-btn"><a href="#">Learn More</a></p>
			</div>
		</div>
	</header>
    
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script> 
</body>
</html>

ADD CSS:

body {
	font-family: 'Poppins', sans-serif;
}
.navbar-dark {
	background-color: transparent !important;
}
.navbar-dark .navbar-brand {
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
}
.navbar-dark .navbar-brand span {
	background: yellow;
	color: #000;
	padding: 5px;
}
.navbar-dark .navbar-nav .nav-link {
	color: #fff;
	text-transform: uppercase;
}
header {
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), url(1.jpg);
	height: 100vh;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
.banner-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.banner-text p {
	color: #fff;
	letter-spacing: 2px;
}
.banner-btn a {
	border: 1px solid #fff;
	border-radius: 50px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 50px;
	display: inline-block;
	margin-top: 15px;
	color: #fff;
	transition: all .6s;
}
.banner-btn a:hover {
	background: yellow;
	color: #000;
}
/*text animation*/

.text-area {
	font-size: 70px;
	text-transform: uppercase;
	font-weight: 700;
}
.text-area span {
	color: yellow;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: animate 5s forwards;
}
.text-area span {
	display: inline-block;
}
.text-area span:nth-of-type(2) {
	animation-delay: .1s;
}
.text-area span:nth-of-type(3) {
	animation-delay: .2s;
}
.text-area span:nth-of-type(4) {
	animation-delay: .3s;
}
.text-area span:nth-of-type(5) {
	animation-delay: .4s;
}
.text-area span:nth-of-type(6) {
	animation-delay: .5s;
}
.text-area span:nth-of-type(7) {
	animation-delay: .6s;
}
.text-area span:nth-of-type(8) {
	animation-delay: .7s;
}
@keyframes animate {
	30% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}
	60% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
	}
	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.navbar-dark {
		background-color: #333;
	}
	.navbar-dark .navbar-nav .nav-link {
		background: #333;
		text-align: center;
	}
	.text-area {
		font-size: 50px;
	}
}
@media only screen and (max-width: 767px) {
	.banner-text p {
		display: none;
	}
	.navbar-dark {
		background-color: #333;
	}
	.navbar-dark .navbar-nav .nav-link {
		background: #333;
		text-align: center;
	}
	.text-area {
		font-size: 20px;
	}
}

I hope you have implemented the code properly. After collecting the code, do more experiments with it. This will further increase your skills. If you like our small effort, please share our articles with everyone. Learn for yourself and help others learn. Thank you so much for visiting our blog.

DOWNLOAD CODE

Bootstrap 4 Homepage with CSS text animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 4 homepage design with text animation

Bootstrap 4 Homepage with CSS text animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form