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>
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
Post a Comment