Thirus Watch on YouTube

Animate Website on Scroll easily without learning CSS Animations or JavaScript

3 min read 1 month ago

Published on Aug 03, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through adding animations to your website using the libraries wow.js and animate.css. You don't need any prior knowledge of CSS animations or JavaScript to achieve this effect. In just a few minutes, you can turn a static webpage into a visually appealing animated experience.

Step 1: Set Up Your Web Page

Start with a simple web page layout that includes:
- A heading (h1)
- A paragraph (p)
- An image (img)
- Additional content if needed (e.g., columns)

Step 2: Include animate.css

Go to the animate.css CDN.
Choose a version lower than 4.0, for example, 3.7.2.

Copy the link tag for the chosen version:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

Paste this link tag above your own stylesheet in the <head> section of your HTML.

Step 3: Include jQuery and wow.js

Search for jQuery on cdnjs.com.

Copy the latest version script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Paste this script before the closing </body> tag in your HTML.

Now search for wow.js on cdnjs.com and copy the latest version script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

Paste this script below the jQuery script.

Step 4: Initialize wow.js

To activate the animations, add the following script in your HTML just before the closing </body> tag:
```
<script>
    new WOW().init();
</script>
```

Step 5: Add Animation Classes

To make elements animated, add the class wow to each element you want to animate.

Choose an animation from the list provided by animate.css. For example:

For the heading (h1):

<h1 class="wow fadeInDown">Your Heading</h1>

For the paragraph (p):

<p class="wow zoomIn">Your paragraph text.</p>

For the image (img):

<img class="wow fadeInUp" src="your-image.jpg" alt="Image Description">

Step 6: Customize Animation Delays

To create staggered animations, use the data-wow-delay attribute:

For the paragraph (with a 0.5-second delay):

<p class="wow zoomIn" data-wow-delay="0.5s">Your paragraph text.</p>

For the image (with a 1-second delay):

<img class="wow fadeInUp" src="your-image.jpg" alt="Image Description" data-wow-delay="1s">

Step 7: Animate Additional Elements

Repeat the process for any additional sections or elements on your page:
- Add the wow class and select animations for each element.
- Specify delays as needed to enhance the visual flow.

Conclusion

By following these steps, you can easily add animations to your website without needing any coding knowledge. Remember to use animations sparingly to avoid overwhelming your users. Experiment with different animations and delays to find the perfect combination that enhances your site's aesthetic. Happy animating!

Table of Contents

Recent