How to Create Jquery Intro Page Animation

How to Create Jquery Intro Page Animation

Today we will create Jquery Intro Page Animation. The intro page animation is always great fun to showcase some quick information to customers.

If you are provider some services, then it’s the great thing to show who are you on the quick note.

As we know, web design is a major factor and how the things layout is more important than that. Making your website users impress, it’s great fun to used the nice color background, image, and beautiful typography.

Today, I am going to show you how to make a front page which has a quick intro of your website. A page I am going to develop is a full screens page with fade out text and a timer bar on the top of the page. All we do with using HTML/CSS and a bit of jquery.

Jquery Intro Page Animation

Ok so let’s get started, but I want to mention here that the technique I am going to used is same as we do for any jquery slider. Just the difference is it will show you some quick text instead of images. Also, it is entirely responsive and works well on any screen sizes.

Jquery Intro Page Animation Markup

We have simply HTML which is very easy to understand. You can have a look that, it have main div class name intro which hold the all other divs and HTML tags.

The div class animated-bar is a loading progress bar which you will see on the top of the screen. Next, we define each slider as a section which includes the rest of content.

<div class="intro">
   <div class="animated-bar"></div>
   
   <div class="slide slide-a">
      <div class="slide-content">
         <p class="slide-a-child">Hi There!</p>
         <h1 class="slide-a-child">My name is Mohamed</h1>
         <p class="slide-a-child">I'm a Front End web developer</p>
      </div>
   </div>
   
</div>

That’s very simple, and it’s not hard to add a seond slide. All you have to copy and past first slide code and then modify the slider class name. Let’s have a look the code and see we just need to change the class name slide-a into slide-b.

<div class="slide slide-b">
  <div class="slide-content">
     <h2 class="slide-b-child">what I do</h2>
     <p class="slide-b-child">I design modern, clean and creative websites</p>
     <p class="slide-b-child">And make them alive on the internet</p>
  </div>
</div>

Intro Page Style

The CSS is the bit longer, and here I am going to explain you few things of CSS. Don’t worry; you will get all the CSS from the demo and below code pen.

To make the screen full screen we have a great new CSS property called VH. The VH allow use to set the size of things according to display.

.intro {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

The CSS animation property makes it possible to create animation and allows to define keyframe created animation. The size of the bar can easily achieve through height element and as for as position concern, we can use absolute position then set the top to zero to set it on the top of the screen or page.

.intro .animated-bar {
  width: 0;
  height: 3px;
  background: #fff;
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bar 5s 3 linear;
          animation: bar 5s 3 linear;
}

The Javascript

With the help of javascript, we will able to set the timeout, fade out and few other functions such as visibility. Each slide will have timeout function, and is-visible class is added through javascript to the all child divs of main slider div class name slide.

Also, When the timeout function competed, it will add the class display: none; to main div of class slide but it will not add this class to last div of slider.

$(document).ready(function () {

    'use strict';

    var slide  = $('.slide'),
        slideAelements = $('.slide-a-child'),
        replay = $('button.replay');

    slide.each(function (i) {
        if (i < 3) {
            setTimeout(function () {
                slide.eq(i).fadeOut();
            }, 5000 * (i + 1));
        }
    });

    function animateSlideA() {
      slideAelements.each(function (i) {
          setTimeout(function () {
              slideAelements.eq(i).addClass('is-visible');
          }, 300 * (i + 1));
      });
    }

   animateSlideA();
   
   replay.on('click', function () {
     location.reload(true);
   });

});

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *