We want animate.css to come into effect only when the content appears in the viewport. Otherwise, it is kinda useless.

Background: Suppose you have applied an animate.css effect on the footer of your website, but you wont see the animation effect when you scroll down the footer, because the animation effect has happened immediately after the page load, perhaps when you were still on the header section of the web page.

 

We want the animation effect only when the content appears in the viewport. For that, you need to apply the animate.css class when the content appears the viewport. Below you will find the code.

 

$(".your-class").inViewport(function(px){
    if(px) $(this).addClass("animated bounceInRight") ;
});

 

Yes, thats jQuery. Life becomes simple with jQuery. .your-class is the class where you want to apply the animate.css effect when the content appears in the viewport.

 

But wait. .  inViewport is not a readymade jQuery method. All credits to this answer in StackOverflow. A user just gave away a beautiful jQuery plugin for us to use.

 

// Plugin @RokoCB :: Return the visible amount of px
	// of any element currently in viewport.
	// stackoverflow.com/questions/24768795/
	;(function($, win) {
	  $.fn.inViewport = function(cb) {
	     return this.each(function(i,el){
	       function visPx(){
	         var H = $(this).height(),
	             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
	         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
	       } visPx();
	       $(win).on("resize scroll", visPx);
	     });
	  };
	}(jQuery, window));

 

Thats it!! Enjoy

0 Do You Love This Article ?

CT

Hello All! You are reading the author(s) profile of CorvineLabs Team. We may be 1,2 or ..any in number. Let that remain withing us. You enjoy our write up. If you want to join the team than do Contact Us.

Leave a Reply

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