Awesome Bootstrap slider with Text Animation

byCodingFlicks -July 24, 2020

0

Awesome Bootstrap slider with Text Animation

The homepage is an essential part of any website, and for any company, the homepage is like a virtual front door. If the website visitor doesn't like what they see at the front door, they will bounce, and there is a possibility that they will never come back.

Regrettably, most of the customers still judge a book by its cover. Your website homepage configuration is substantially more significant than you'd think. A beautifully crafted homepage of a website makes the difference between leaving possible consumers with a substantial impression of your company or product. A homepage design can attract visitors to spend more time exploring the product or service on offer, inviting them to learn more and, hopefully, convincing them to purchase.

For this snippet, we will design a beautiful looking homepage with awesome text animation with the help of the latest html5, css3, and Bootstrap. Now, Bootstrap is the framework for ready-made snippets like typography, buttons, navigation menu, accordion, etc. It saves a lot of time for the developer as the developers of Bootstrap already style the snippet. For this project, we will use some of the ready-made snippets of Bootstrap three and use animate CSS library to give some animation to the banner text.

For the implementation of this project, you have to download the bootstrap CSS and js file from their website and integrate it into your HTML file. We also need to add the latest version of jquery. Otherwise, the Bootstrap carousel will not work. For the test animation, we also have to download the animate CSS file from their official website and add it to our archive. For the sake of this tutorial, I am using the CDN ( Content Delivery Network ) library online.

For designing the navbar, we have to go to the bootstrap site and select the Bootstrap 3.3.7 version. After that, select components from the top menu and the right-hand side choose the navbar and scroll down a bit to copy the bootstrap navigation bar code. Inside the HTML page, we will take a header element inside, which we will paste the code that we have downloaded from Bootstrap. To make the navbar fixed, we have to use a navbar 3 class called 'navbar-fixed-top' in the nav element. We will use another bootstrap class called 'navbar-inverse' to give the top menu darkish background color. By default, the navbar will occupy the whole width of the viewport as it has a container-fluid class in the navbar. We will change it to the container so that the navbar automatically takes some margin and from both sides. The beauty of Bootstrap is that without writing a single line of CSS code, we have achieved a nice looking navbar for our project. Now we have to make some modifications to it, like changing the brand text to ours or put a png logo in it.

In the Bootstrap default navbar, we will have all the elements that a navbar requires: links, dropdowns, and search boxes. For this project, we will only keep the brand and one link from the right-navbar and delete the rest of the markup. After that, we will put our links there. The color of the logo and nav links will be darkish by default, but we will change to white. To make the navbar transparent, we have to style navbar-inverse class in the stylesheet by giving it a background-color transparent value.

You may like this also :

For the carousel part, instead of the component, we have to click the javascript in the top menu in the bootstrap website, and after some scrolling, we will get the code for the carousel slider. Please copy the code from there and paste it underneath the nav mark up in the HTML file. By default, there will be two items in the carousel, but we have to add one more to make it three. Use images and text for sliders according to your need. When you first implement the slider, you won't be able to see the slider images sliding. We have to make the carousel full-height of the homepage. To make the carousel 100% width of the website, we have to give 100vh to the carousel-inner bootstrap class in the stylesheet.

The captions of the bootstrap carousel will appear in the bottom by default. We have to carousel-caption class padding of 250px to take the captions in the middle of the homepage. You can style the text in the carousel-caption according to your need. In the right and left carousel control, there will be a rgba transparent image. We can easily remove those by giving the carousel-control left and right class a background image none property in the stylesheet.

For the creation of this snippet, we have to create two files. The First one is the HTML File, and the second one is the CSS file. You need to copy the HTML And CSS code given below and paste them to the appropriate files and save them.

FILES:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML:

<header>
  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <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="#">Company Logo</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 navbar-right">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
    </div>
<!-- /.container-fluid -->
  </nav>


  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://i.postimg.cc/qR1qGhZZ/1.jpg" alt="...">
        <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 src="https://i.postimg.cc/KjVY6XbP/2.jpg" alt="...">
        <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 src="https://i.postimg.cc/7PQbGzz5/3.jpg" alt="...">
        <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" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</header>

CSS:

body{
  font-family: poppins;
}
    .navbar-inverse {
 background-color: transparent;
 border-color: transparent;
}
    .navbar-inverse .navbar-brand {
 color: #fff;
}
    .navbar-inverse .navbar-nav > li > a {
 color: #fff;
 text-transform: uppercase;
 font-weight: 900;
}
header .carousel-inner .item{
  height: 100vh;
}
header .carousel-inner .item img{
  width: 100%;
}
.carousel-caption{
  padding-bottom: 250px;
}
.carousel-caption h2{
  font-size: 50px;
  text-transform: uppercase;
}
.carousel-control.right{
  background-image: none;
}
.carousel-control.left{
  background-image: none;
}

Thank you very much for visiting the blog.

Please do not enter any spam link in the comment box.