gif
Don't Miss Out! Our new update has been released.
gif
Something you love is now on sale!
Buy now !
  • Bookmark
  • 2
    Cart
    • Furniture Chair for Home
      $12.45
    • Rest Well Chair
      $49.00
    • Order Total : $1000.00
    • View Cart Checkout
  • 4
    Notifications

    • Delivery processing

    • Order Complete

    • Tickets Generated

    • Delivery Complete

  • Emay Walter

    Admin

Wow Animation

  2. Animation
  3. Wow Animation
WOW Example animation
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
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();