Bootstrap 3 CSS Animation & Transition Effects

Animation Effects

Number of trending websites are now using CSS Animation library like Animate.css  for effects like dropIn, dropDown, fadeIn.

Lets add transition animation to  following element
<div id="header-text">This is text heading.</div>

All we have to do is to include Animation.css file in our page and then add following class to element
<div id="header-text" class="animated fadeIn">This is text heading.</div>

That's it!

Adding Animation effects on Scroll of page

Animation effect triggers even if page element is not visible on screen. We don't want animation to trigger when its not visible. We want to trigger animation when user scrolls the page and element is about to be displayed.

For that we can use WOW.js library. We need to initialize WOW object in our page and then we can add wow class which will give the desired result.

Blur Block when user user scrolls down from that element

We can set opacity of the element when user scrolls down the element. Based on size of window and scollTop position we can caculate opacity of the block.

function() {
var h = window.innerHeight;
$(window).on('scroll', function() {
var st = $(this).scrollTop();
$('#element').css('opacity', (1-st/h) );
});
},

 Show Spinner until all elements(images) are loaded

$(window).load(function() {
$('#status').delay(100).fadeOut('slow');
$('#preloader').delay(500).fadeOut('slow');
}

 In html add following

<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>

Along with css  style mentioned here