Animate your WordPress page

Animate.css is a CSS library that can quickly add animation effects to any element. To use it in WordPress, the file has to be added to your site using the functions.php file. Once this is done you just need to add a few classes to any element that you want to animate.

The home page of this site uses animate.css to animate the text in the showcase unit and the three posts that are under it.The site you are looking at is based on WordPress

1/ Include the animate.css file

Your themes functions file will include an enqueue scripts function. Here you can add any CSS or Javascript files that are used by your theme.

Upload the animate.css file¬† to your themes CSS folder. Next Add a link to the file in your theme’s functions.php file.

function basictheme_script_enqueue() {
	//css
    wp_enqueue_style('customstyle', get_template_directory_uri()
 . '/css/basic.css', array(), '1.0.0', 'all');
    wp_enqueue_style('animate-css', get_template_directory_uri() .
 '/css/animate.css', array(), '1.0.0', 'all');
	wp_enqueue_script('my-custom-script', get_template_directory_uri() 
.'/js/my-custom-script.js', array('jquery'), null, true);
}
 add_action( 'wp_enqueue_scripts', 'basictheme_script_enqueue');

2/ Add the animate classes to the element

There are many effects that can be used see the documentation.

 



<div class='animated fadeInDown'>........</div>




 

3/ Use jQuery to trigger animation on scroll down

JQuery can be used to detect when the browser has been scrolled down by a certain amount. A class can then be added to any element to animate it. jQuery is built into WordPress by default. Here the animation is triggered when the user scrolls down by 200px.

Check that jQuery is being included by your functions file.


  wp_enqueue_script('my-custom-script', get_template_directory_uri() 
.'/js/my-custom-script.js', array('jquery'), null, true);

my-custom-script.js is where you should place the jQuery code, in the js folder.

var iScrollPos = 200;
jQuery(window).scroll(function () {
    var iCurScrollPos = jQuery(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        //Scrolling Down
    jQuery('.post-wrapper').addClass('animated shake animation-duration:3s');
    } 
});

Note in WordPress jQuery as a word has to be used, not $, this prevents conflicts with other libraries.

Leave a Reply

Your email address will not be published. Required fields are marked *