Tuesday, February 10, 2015

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

11 comments:

  1. This blog explains the details of most popular technological details. This helps to learn about what are all the different method is there. And the working methods all of that are explained here. Informative blog.
    School Rebranding UK

    ReplyDelete
  2. from my experience point of view score is must and needful for everygraduate students. thanks for valuable article.
    IELTS coaching classes in chennai

    ReplyDelete