CSS animated scroll loading effects on Bootstrap WordPress theme

My original article about scroll loading animations with animate.css and viewportchecker.js got a good deal of comments and feedback. The original tutorial was based on a simple HTML page. But when somebody ports the code used in it over to a Bootstrap environment, it presented some issues. It is because of the class names I used in the demo already existed in the Bootstrap framework with different properties. That is why I am posting this updated demo that shows the scroll loading effects on a Bootstrap based WordPress theme. Basically I just downloaded a starter WP theme from underscores.me and equipped it with bootstrap framework.

Next I downloaded the animate.css file and the viewportchecker.js script and enqueued them in the functions.php file of the theme.

wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/animate.css');
wp_enqueue_script( 'viewportchecker', get_template_directory_uri() . '/js/viewportchecker.js', array(), '20120206', true );

Then I open the content.php file in my theme and added a custom class name ( .dynpost ) to the posts. This will help me to identify the post elements when I want to animate them later.

<article id="post-<?php the_ID(); ?>" <?php post_class('dynpost'); ?>>

I also added two custom class elements and its properties to the style.css file of the theme. These are unique and will not conflict with the bootstrap classes.

.bt_hidden{ opacity:0;}
.bt_visible{ opacity:1;}

Now we have everything set to initialize the scroll load animation effect. Since I published the original article, the viewportchecker script has been updated and got a couple of new feature added to it. It is now possible to run the animation when you scroll down and also when you scroll back up. So the function runs everytime when the selected element comes into viewport, not just once. It now also supports horizontal scrolling when enabled. The javascript code I used in my theme is as below

jQuery(document).ready(function() {
jQuery('.dynpost').addClass("bt_hidden").viewportChecker({
classToAdd: 'bt_visible animated bounceInLeft', 
offset: 100, 
repeat: true, 
callbackFunction: function(elem, action){},
scrollHorizontal: false 
});
});

Now I save this js file as custom.js file and enqueue it on the functions.php in my theme. You can change the animation name from bounceInLeft to any entrance animation effect supported by animate.css.

wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array(), '20120206', true );

With that you have a Bootstrap WordPress theme that supports CSS animated scroll loading effects, thanks to the viewportchecker.js script
Theme Demo

Theme Download

  • Thanks, it works perfectly, even with Foundation.

  • Tested right now on my custom theme, works nicely. Thanks a lot, it was exactly the effect I was searching for! ^^

  • Thanks to sharing article and nice services in your website etc.

  • Greate its working. Thanks for sharing.

  • Im trying to apply this in a ASP.Net Webform application. With Bootstrap on it, is there any considerations you would like to comment?. Thanks in advance

  • Thanks alot, i want 3d animation effects. where can i find that?

  • Jmazzil

    any insight on how to get buddypress activity entries to work past the ‘load more’ button?

  • Jure

    Hi. I successfully implemented it into my site (local wp development) and once I scroll to the element which is animated there must be a small amount of padding/margin somewhere because whole website moves for few px and then jumps back. Can’t figure out what is wrong and can’t give you any link either. :/

    • Jure

      I figured it out. If effect is animated from right or left a horizontal scroll bar appears for a second until the end of animation. Any suggestion how to fix this? It looks unprofessional if page is jumping up and down. Thanks

  • RamziRambles♫

    I have a bootstrap based HTML page but without wordpress. What should I do?

  • leyla onsori

    It was very usefull for me … thank you so much

  • Seb Dean

    For some reason, it will fire the animation and then straight after it disappears. Any ideas why?

    • Niccu Bagonoc

      Same here. Any solutions?

    • Niccu Bagonoc

      solved it. Use the old version of viewportchecker. Use the one from the theme download in this tutorial.

      • Seb Dean

        Ah, perfect, will give that a try. Thanks.