Wow Animation | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Wow Animation

##### WOW Example animation

##### 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();