WOW.js - CSS

Introduction

WOW.js is a JavaScript library that detects when elements are scrolled into view and adds animation classes to them. It requires no additional dependencies and is lightweight, with a minified size of only 2.8kb.

With WOW.js, you can easily create stunning animations for your website without the need for complex JavaScript or CSS animations.

Features

• Easy to install and use
• Lightweight
• No dependencies
• Customizable
• Supports all major browsers (including IE9+)

Installation

With NPM:

npm install wow.js

Or download and include the script:

<script src="path/to/wow.min.js"></script>

Usage

1. Add the 'wow' class to the element you want to animate:

<div class="wow">
  Some content here
</div>

2. Initialize WOW.js by creating a new instance:

new WOW().init();

3. Customize the animation by adding one of the following class names to the element:

• bounceIn
• fadeIn
• flipInX
• flipInY
• rotateIn
• rollIn
• zoomIn

For example:

<div class="wow fadeIn">
  Some content here
</div>

Options

You can customize the settings of WOW.js by passing in an object with the desired options:

new WOW({
  offset: 100,
  mobile: false
}).init();

Available options are:

• animateClass: The class name used for the animation (default: 'animated')
• offset: Distance in pixels from the bottom of the screen before the animation triggers (default: 0)
• mobile: Whether or not to animate on mobile devices (default: true)
• live: Whether or not to scan for new elements added to the DOM after initialization (default: true)

Conclusion

WOW.js is an easy-to-use and lightweight library for adding beautiful animations to your website. With its simple setup and variety of customization options, it's a great tool for both beginner and advanced developers.