Bootstrap slider with Text Animation

Hello, friends. In this blog, we will create a simple homepage with a bootstrap slider and text animation. In this project, I have shown how to integrate animate.css with the bootstrap carousel to get a nice text animation while the carousel moves from one slide to another slide. I have shared many CSS animation examples, bootstrap, JavaScript-based snippets in this blog. Please make sure to check those snippets as well apart from this snippet. For better understanding, please watch the below tutorial and continue from there.

I hope you have watched the whole video and understood the basic coding behind it. I used basic bootstrap's primary navbar & carousel snippet in the project. I didn't modify the navbar as you can do it on your own. The main reason for the project is to show the implementation of animate.css with the bootstrap carousel. There are many animation styles available on the animate.css website. You can choose your animation from the website and add the class name with the carousel caption elements. For these snippets, I used them on h2 and h3 tags. If you use a call-to-action button, you can apply a separate animation for that element. Without explaining further, I am providing the code below.

You May Like this:

Bootstrap Slider with text Animation [ Source Code ]:

for creating this snippet, you have to make two files: HTML with .html extension, and the other is CSS with .css extension. Then link the CSS file with the HTML file; otherwise, the HTML elements will not get the styles it requires. after that, copy the code from the below boxes and paste then to the individual files and save.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Slider with text Animation</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<header>
		<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a>
				</div><!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">Link <span class="sr-only">(current)</span></a>
						</li>
						<li>
							<a href="#">Link</a>
						</li>
						<li class="dropdown">
							<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider" role="separator"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
								<li class="divider" role="separator"></li>
								<li>
									<a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#">Link</a>
						</li>
						<li class="dropdown">
							<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider" role="separator"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
		<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
				<li data-slide-to="1" data-target="#carousel-example-generic"></li>
				<li data-slide-to="2" data-target="#carousel-example-generic"></li>
			</ol><!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img alt="..." src="https://i.postimg.cc/wTBDN2JW/1.jpg">
					<div class="carousel-caption">
						<h2 class="animated bounceInRight" style="animation-delay: 1s">We Are Reliable</h2>
						<h3 class="animated bounceInLeft" style="animation-delay: 2s">Lorem ipsum dolor sit amet.</h3>
					</div>
				</div>
				<div class="item">
					<img alt="..." src="https://i.postimg.cc/GhHwf0Gv/2.jpg">
					<div class="carousel-caption">
						<h2 class="animated slideInDown" style="animation-delay: 1s">We Deliver On Time</h2>
						<h3 class="animated slideInRight" style="animation-delay: 2s">Lorem ipsum dolor sit amet.</h3>
					</div>
				</div>
				<div class="item">
					<img alt="..." src="https://i.postimg.cc/ncsgk4fk/3.jpg">
					<div class="carousel-caption">
						<h2 class="animated zoomIn" style="animation-delay: 1s">Best Customer Support</h2>
						<h3 class="animated zoomIn" style="animation-delay: 2s">Lorem ipsum dolor sit amet.</h3>
					</div>
				</div>
			</div><!-- Controls -->
			 <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
		</div>
	</header>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</body>
</html>

ADD CSS:

body{
  font-family: sans-serif;
}
header .carousel-inner .item{
  height: 100vh;
}
header .carousel-inner .item img{
  width: 100%;
}
.carousel-caption{
  padding-bottom: 280px;
}
.carousel-caption h2{
  font-size: 50px;
  text-transform: uppercase;
}
.carousel-control.right{
  background-image: none;
}
.carousel-control.left{
  background-image: none;
}

That's all. You have successfully created a bootstrap carousel with text animation. If you like this snippet, then follow the blog for future updates. Thanks for visiting the blog.

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap slider with Text Animation

You might like

Post a Comment

Post a Comment

Contact Form