In this lesson, we'll add animations to our Landing Page.

Step 1

The first thing we have to do is to initialize animations. By "initialize" I mean call the proper function from MDB script.

Place this code immediate below Google Maps script:

<!--Animations' initialization-->
<script>
new WOW().init();
</script>

Step 2

Add a class .wow to a heading in our intro.

<h1 class="h1-responsive wow">New York Advertising Agency</h1>

Step 3

Pick an animation style from the list of animations, then add it's CSS class to the HTML element.

Note: If you want to see animations in action before using it, check Live Presentation of Animations.

<h1 class="h1-responsive wow fadeInDown">New York Advertising Agency</h1>
            

Save the file and refresh the browser. You will see a nice and smoothly animated heading inside your intro.

Step 4

Let's add more animations. Replace the code of our Intro with the following:

<!--Mask-->
<div class="view hm-black-strong">
    <div class="full-bg-img flex-center">
        <ul>
            <li>
                <h1 class="h1-responsive wow fadeInDown">New York Advertising Agency</h1>
            </li>
            <li>
                <p class=" wow fadeInDown" data-wow-delay="0.2s">Digital advertising agency focused on today's consumers</p>
            </li>
            <li>
                <a href="" class="btn btn-primary btn-lg wow fadeInLeft" data-wow-delay="0.4s">Sign up!</a>
                <a href="" class="btn btn-default btn-lg wow fadeInRight" data-wow-delay="0.4s">Learn more</a>
            </li>
        </ul>
    </div>
</div>
<!--/.Mask-->
            

Notice, that we added a special attribute data-wow-delay="0.2s". It gives our animation a delay, which let us create more complicated composition.

You can also use the following attribute:

1. data-wow-duration: Animation duration

2. data-wow-delay: Delay before the animation starts

3. data-wow-offset: Distance to start the animation (related to the browser bottom)

4. data-wow-iteration: Number of times the animation is repeated

We've used 3 different animations: "fadeInDown" , "fadeInLeft" and "fadeInRight".

If you want we you use any of 74 animations available for MDB.

Save the file and refresh your browser. Now you can see we animated both headings and buttons.

Now you can play with the animations on your own. Or if you prefer, you can download a final file for this lesson and check how I used them.

Our Landing Page is ready. The last thing you should do is to add your own texts, data, and images to it. Then upload it to your server and start making money with your own business!