Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active November 11, 2019 14:29
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save srikat/11533776 to your computer and use it in GitHub Desktop.
Save srikat/11533776 to your computer and use it in GitHub Desktop.
Scroll animations in WordPress using WOW.js. http://sridharkatakam.com/scroll-animations-wordpress-using-wow-js/
<?php
//* Do NOT include the opening php tag
//* Enqueue Animate.CSS and WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '', true );
}
//* Enqueue script to activate WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
<?php
//* Do NOT include the opening php tag
//* Add custom classes to posts in Posts page and archives
function post_animation_classes( $classes ) {
if ( is_home() || is_archive() ) {
$classes[] = 'wow fadeInLeft';
}
return $classes;
}
add_filter('post_class', 'post_animation_classes');
<div class="wow bounceInUp">Content to Reveal Here</div>
<?php
//* Do NOT include the opening php tag
//* Enqueue Animate.CSS and WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
if ( is_home() || is_archive() ) {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '', true );
}
}
//* Enqueue script to activate WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() {
if ( is_home() || is_archive() ) {
add_action( 'print_footer_scripts', 'wow_init' );
}
}
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
<?php
//* Do NOT include the opening php tag
add_filter( 'genesis_attr_entry', 'custom_genesis_attributes_entry' );
/**
* Add attributes for entry element.
*
* @since 2.0.0
*
* @param array $attributes Existing attributes.
*
* @return array Amended attributes.
*/
function custom_genesis_attributes_entry( $attributes ) {
if ( is_home() || is_archive() ) {
$attributes['data-wow-offset'] = '100';
}
return $attributes;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment