Follow the steps to implement wow.js on your wordpress theme. The events happening are when element enters viewport add a class, when it exits viewport remove class.
The javascript to add on footer
const shakebtn = document.querySelector('.shakebtn')
const add_class_on_scroll = () => shakebtn.classList.add("testy","wow")
const remove_class_on_scroll = () => shakebtn.classList.remove("testy","wow")
const observer = new window.IntersectionObserver(([entry]) => {
console.log(entry.boundingClientRect.top)
if (entry.isIntersecting) {
console.log('Enter')
shakebtn.classList.add("testy")
}else {
console.log('Leave')
shakebtn.classList.remove("testy")
}
}, {
root: null,
threshold: 0,
})
observer.observe(shakebtn)ID is #shakebtn
classes that we’ll be adding & removing are: testy & wow (wow class is needed for wow.js to work)
CSS for testy
.testy {
animation: headShake; /* referring directly to the animation's @keyframe declaration */
animation-duration: 1s; /* don't forget to set a duration! */
}Files for WOW.js
Here
Place on child theme root
Code for functions.php
add_action( 'wp_enqueue_scripts', 'b5f_wow_init' );
function b5f_wow_init() {
wp_register_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js' );
wp_enqueue_script( 'my-wow', get_stylesheet_directory_uri() . '/js/my-wow.js', array( 'wow' ), null, true );
wp_enqueue_style( 'wow-css', get_stylesheet_directory_uri() . '/css/animate.min.css' );
}Choose animation here
