Loading...

### Wow Animation

##### WOW Example animation

Image caption 1
Image caption 2
Image caption 3
Image caption 4
Image caption 5
Image caption 6
Image caption 7
Image caption 8
Image caption 9
Image caption 10
Image caption 11
Image caption 12
Image caption 13
Image caption 14
Image caption 15
Image caption 16
Image caption 17
Image caption 18
Image caption 19
Image caption 20
Image caption 21
Image caption 22
Image caption 23
Image caption 24
Image caption 25
Image caption 26
Image caption 27
Image caption 28
Image caption 29
Image caption 30
Image caption 31
Image caption 32
Image caption 33

##### 1Setup wow.js

(You can link to another CSS animation library by changing wow.js settings)
`<link rel="stylesheet" href="css/animate.css" >`

##### 2Link and activate wow.js

< script src="js/wow.min.js" > < /script >
< script >
`WOW.init();`
< /script >

##### 3Make an element revealable

(You can change this CSS class in the WOW settings to avoid name conflicts.)

###### Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.

< div class="wow" >
`Content to Reveal Here`
< /div >

##### 4Choose the animation style

Pick an animation style in Animate.css , then add the CSS class to the HTML element
< div class="wow bounceInUp" >
`Content to Reveal Here`
< /div >

##### ExtraAdvance Options

data-wow-duration: Change the 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

    <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
     </section>
     <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">
     </section>

##### SettingsCustomize Settings

boxClass: Class name that reveals the hidden box when user scrolls.

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

offset: Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distance the hidden box is revealed.

mobile: Turn on/off wow.js on mobile devices.

live: consatantly check for new WOW elements on the page.

    wow = new WOW(
     {
     boxClass: 'wow', // default
     animateClass: 'animated', // default
     offset: 0, // default
     mobile: true, // default
     live: true // default
     }
     )
     wow.init();