How to setup animate.css and wow.js on your website

If you want to add some cool animations to your website, you might want to check out animate.css and wow.js. These are two libraries that make it easy to create and apply CSS animations to any element on your page. In this blog post, I will show you how to set them up and use them on your website.

First, you need to download the animate.css and wow.js files from their respective websites. You can also use a CDN link if you prefer. Then, you need to include them in the head section of your HTML document, like this:

<head>
<link rel=”stylesheet” href=”animate.css”>
<script src=”wow.js”></script>
</head>

Next, you need to initialize the wow.js library in a script tag at the end of your body section, like this:

<script>
new WOW().init();
</script>

Now, you are ready to use the animate.css classes on any element you want to animate. For example, if you want to make a heading fade in from the left, you can add the class “wow fadeInLeft” to it, like this:

<h1 class=”wow fadeInLeft”>Hello, world!</h1>

You can find the list of all the available animations on the animate.css website. You can also customize the duration, delay, and iteration count of the animations using the data-wow-duration, data-wow-delay, and data-wow-iteration attributes.

That’s it! You have successfully set up animate.css and wow.js on your website. Now you can enjoy creating beautiful and engaging web pages with minimal effort. Have fun!

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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