Add and use wow.js into WordPress theme

1. Download animate.min.css and wow.min.js from github (https://github.com/daneden/animate.css)
2. Create a subfolder in your theme / child theme called css
3. Place animate.min.css there.
4. Create a subfolder in your theme / child theme called js
5. Place wow.min.js there.
6. Add the following lines to your theme / child theme's functions.php file

//* Enqueue WOW.js Animate.CSS and

function zeal_enqueue_scripts() {
wp_enqueue_style( 'wow-css', get_template_directory_uri(). '/css/animate.min.css' );
wp_enqueue_script('wow-js',get_template_directory_uri().'/js/wow.min.js', array(), '',true);
}
add_action( 'wp_enqueue_scripts', 'zeal_enqueue_scripts );

7. Add below JavaScript code before </body> tag to theme's footer.php

<script type="text/javascript">
var wow = new WOW({
boxClass:     'wow',      // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset:       0,          // distance to the element when triggering the animation (default is 0)
mobile:       true,       // trigger animations on mobile devices (default is true)
live:         true,       // act on asynchronously loaded content (default is true)
callback:     function(box) {
  // the callback is fired every time an animation is started
  // the argument that is passed in is the DOM node being animated
},
scrollContainer: null,    // optional scroll container selector, otherwise use window,
resetAnimation: true,     // reset animation on end (default is true)
  });
wow.init();
</script>

Comments

Popular posts from this blog

Creating Protected routes in ReactJS