How to Animate Website Using Javascript – WOW.js

How to animate website – WOW.js is an amazing javascript script that takes advantage of CSS3 animations to animate & reveal Html elements when they’re scrolled into view.

Animations can greatly improve an interface’s UX, but it’s important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

And afterward I went over wow.js by Matt Aussaguel, which has the title “Uncover Animations When Scrolling.” Yup, that sounds right. From what I can tell in their permitting understanding, you should buy it to utilize it in the wild, yet this blog model fits under their free permit so how about we make it go!

Using Javascript To Animate the Website

How to Animate website

  1. You want to add more animations to your site (animate.css makes this really easy)
  2. Moreover, you want those animations to work when revealed by scrolling.

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

How to Animate website

Basic Usage:

Load the required animate.css for CSS3 animations.

<link rel="stylesheet" href="css/animate.css">

Create html elements you want to animate on scroll down.

<div id="main">
<section class="wow fadeInDown"></section>
<section class="wow pulse" data-wow-iteration="infinite" data-wow-duration="1500ms">Hello Technical Suneja</section>
<section class="wow slideInRight" data-wow-delay="2s"></section>
<section class="wow bounceInLeft" data-wow-offset="350"></section>
<section class="wow slideInLeft" data-wow-duration="5s"></section>
</div>

Load the wow.js at the end of the document so the page load faster.

<script src="wow.js"></script>

Initialization with optional settings.

wow = new WOW(
{
boxClass:     'wow', 
animateClass: 'animated',
offset:       100
}
);
wow.init();

All default options.

var wow = new WOW({

    // selector
    boxClass: 'wow', 

    // animate class
    animateClass: 'animated',

    // offset in pixels
    offset: 0,

    // triggers animations on mobile devices
    mobile: true,

    // acts on asynchronously loaded content
    live: true,       

    // callback function that will be triggered every time an animation is started
    callback:     function(box) {

    },

    // scroll container selector
    scrollContainer: null 
    
  });

Install:-

Click the links below to view the animate.css and WOW.js files on CDN:

  1. WOW.js Minified  https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js
  2. Animate.css Minified  https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

These are the Main files and rest you can download from the below download button and if you have any concern regarding code then please put your comment down in the comment section.

Conclusion:-

This simple Animation script helps you to integrate into the website you can use this in any type of website. The usefulness of this demo can be effectively upgraded according to your necessities And there you go!  From them on you can apply the class ‘wow’ to get the scroll function and then any animate.css class to get the effect.

For Hot updates : Click here

2 Comments

  1. Ganesh July 17, 2020
  2. Harshil ramani July 19, 2020

Add Comment