Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Show Animations in Browser Viewport
<?php
add_action( 'wp_enqueue_scripts', 'prefix_in_browser' );
/**
* Enqueuing Waypoints & CSS Animate
*
*/
function prefix_in_browser() {
wp_enqueue_script( 'waypoints-init', get_stylesheet_directory_uri() . '/js/waypoints.init.js', array( 'waypoints' ), '1.0.0', true );
wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/jquery.waypoints.min.js', array( 'jquery' ), '4.0.1', true );
wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.min.css', '3.7.0', 'all');
}
jQuery(document).ready(function($) {
$('#selector').waypoint(function() { // Add in your CSS selector
$('#selector').addClass("animated jello") ; // Change your CSS selector and use addClass to add 'animated' and the CSS Animation name
}, {
offset: '80%' // Change % for animation to start from distance to top of browser when element comes into the viewport
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.