jimboobrien
5/5/2014 - 10:57 AM

Scroll animations in WordPress using WOW.js. http://sridharkatakam.com/scroll-animations-wordpress-using-wow-js/

Scroll animations in WordPress using WOW.js. http://sridharkatakam.com/scroll-animations-wordpress-using-wow-js/

<?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;

}
<?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 }
<div class="wow bounceInUp">Content to Reveal Here</div>
<?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');
<?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 }