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.