Written by Michal Szymanski ,
Final result previewPrevious 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:
data-wow-duration: Animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
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!