Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Animation

Animations


Written by Michal Szymanski ,


Final result preview
Previous lesson

In this lesson, we'll add to our Landing Page animations on a scroll. The first thing we have to do is to initialize the animations in our project.

Step 1: Initialize a script for animations by placing 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">Material Design for Bootstrap 4</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.


<h1 class="h1-responsive wow fadeInDown">Material Design for Bootstrap 4</h1>

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


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


<!--Intro content-->
<div class="full-bg-img flex-center">
    <ul>
        <li>
            <h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">Material Design for Bootstrap 4</h1></li>
        <li>
            <p class="wow fadeInDown">The most powerful and free UI KIT for Bootstrap</p>
        </li>
        <li>
            <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg wow fadeInLeft" data-wow-delay="0.2s">Sign up!</a>
            <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg wow fadeInRight" data-wow-delay="0.2s">Learn more</a>
        </li>
    </ul>
</div>
<!--/Intro content-->

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!


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next tutorial

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 17

  • User avatar

    Marta Szymanska

    Hi, if you want to share your photos on the web, you'll need to transfer it to a website like flickr or google photos first or your own webserver. But if you only want to test it with a local html file, you can set your photo on the same folder where your html is located and write the same 'img src="yourphoto.jpg"' tag.

  • User avatar

    viveksharma

    Sir, how do i change the background image? The image is in my PC and i want to add it to the background instead of the default picture here.

  • User avatar

    Kamil Paciepnik

    Hi Nitin Bansal, please write an email to me with a detailed description of your problem - k.paciepnik@mdbootstrap.com

  • User avatar

    Nitin Bansal

    Great work. Its working on Bootstrap 4 alfa 3, but there is some issues in alfa 6, like carousal positioning and carousal control prev next icons. Please update this. Will be of great help.

  • User avatar

    dezzy

    Honest guys at you too good to be truth

  • User avatar

    James

    My progress is fine. I will upgrade to pro version very soon. Great animation features Michal. Your work is awesome

  • User avatar

    Michal Szymanski

    Cześć Maciej. Animacje "na scroll" musisz zainicjować , żeby zadziałały. Kod jest wporządku, przeczytaj proszę uważnie tutorial.

  • Maciej Krężlewicz

    Witam. W kodzie jest błąd. Trzeba dodać do każdego elementu klasę animate i klasę efektu inaczej nie działa:)

  • benjamin

    Thank you very much Michael. I see clearly now :-)

  • User avatar

    Michal Szymanski

    Benjamin, in MDB we've included a version of WOW library released under MIT (so free to use and modify) licence. Later the owner changed the license, but according to international law you are required to comply with this license, which was concluded at the time of downloading the software. So feel free to use animations with MDB :)

  • benjamin

    The reason there is not animation, is that the wow library is not available in the free package I guess. At least in my case. @Michael, big thanks for the great tutorials. I'm enjoying it.

  • User avatar

    Michal Szymanski

    Yes. Premium component (we use some of them in this tutorial) are available only in Pro version. However animations are part of free package and it should work.

  • User avatar

    Alexandr Revenoc

    I think it's free. That version I downloaded in your Intro lesson. That's the case?

  • User avatar

    Michal Szymanski

    alexandr.revenoc, do you use Free or Pro version?

  • User avatar

    alexandr.revenoc

    I don't know why - the code is absolutely the same, but I don't see any animations and Social buttons in the don't display - there is only text without color buttons. Why is that happening?

  • User avatar

    Michal Szymanski

    I'm glad you like it!

  • User avatar

    swaraj

    Awesome Work Bro.

Leave a reply

Anonymous User

Bootstrap tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free