September 10, 2015

Animation effects on page appear

This is very good advantage to add animations at your website. It look so amazing while animation appears on your screen and user gives a positive feedback. There are so many HTML5 effects are available. Here we will be discussing how to make Animation effects on page appear event that you have seen in a lot of websites. Its a basic CSS animation combined with page appear jQuery event.
First you have to know about following:

  • Make CSS animation.
  • Adding animation effect at CSS.
  • Adding Page appear effect.

LIVE DEMO

 

https://jsfiddle.net/shakalya/kvmjjoa4/

Here is a page Appear script that will give you appear event to any HTML id or class.
You can also have a look to github page
https://github.com/morr/jquery.appear/blob/master/jquery.appear.js

or follow copying below codes to your js file.

(function($) {
var selectors = [];

var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
};
var $window = $(window);

var $prior_appeared = [];

function process() {
check_lock = false;
for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
var $appeared = $(selectors[index]).filter(function() {
return $(this).is(‘:appeared’);
});

$appeared.trigger(‘appear’, [$appeared]);

if ($prior_appeared[index]) {
var $disappeared = $prior_appeared[index].not($appeared);
$disappeared.trigger(‘disappear’, [$disappeared]);
}
$prior_appeared[index] = $appeared;
}
};

function add_selector(selector) {
selectors.push(selector);
$prior_appeared.push();
}

// “appeared” custom filter
$.expr[‘:’][‘appeared’] = function(element) {
var $element = $(element);
if (!$element.is(‘:visible’)) {
return false;
}

var window_left = $window.scrollLeft();
var window_top = $window.scrollTop();
var offset = $element.offset();
var left = offset.left;
var top = offset.top;

if (top + $element.height() >= window_top &&
top – ($element.data(‘appear-top-offset’) || 0) <= window_top + $window.height() &&
left + $element.width() >= window_left &&
left – ($element.data(‘appear-left-offset’) || 0) <= window_left + $window.width()) {
return true;
} else {
return false;
}
};

$.fn.extend({
// watching for element’s appearance in browser viewport
appear: function(options) {
var opts = $.extend({}, defaults, options || {});
var selector = this.selector || this;
if (!check_binded) {
var on_check = function() {
if (check_lock) {
return;
}
check_lock = true;

setTimeout(process, opts.interval);
};

$(window).scroll(on_check).resize(on_check);
check_binded = true;
}

if (opts.force_process) {
setTimeout(process, opts.interval);
}
add_selector(selector);
return $(selector);
}
});

$.extend({
// force elements’s appearance check
force_appear: function() {
if (check_binded) {
process();
return true;
}
return false;
}
});
})(function() {
if (typeof module !== ‘undefined’) {
// Node
return require(‘jquery’);
} else {
return jQuery;
}
}());

Now for using this appear event see the following:

jQuery(document).ready(function($){

/* bind appear with class animated */
$(‘.animated’).appear();

/* now look for class with fadeInLeftNow with animated and add another class which will animate the object */
jQuery(document.body).on(‘appear’,’.fadeInLeftNow’,function(){jQuery(this).each(function(){jQuery(this).addClass(‘fadeInLeft’)});});

});

You must add this css

.animated{
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
}

/* making animation name fadeInLeft */

@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px);}
100%{opacity:1;-o-transform:translateX(0);}
}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);}
100%{opacity:1;transform:translateX(0);}
}

/* Hiding at start */
.fadeInLeftNow{opacity:0;}

/* Adding animation to class fadeInLeft and Showing */
.fadeInLeft{
-webkit-animation-name:fadeInLeft;
-moz-animation-name:fadeInLeft;
-o-animation-name:fadeInLeft;
animation-name:fadeInLeft;
opacity:1 !important;}

Now add below two classes to the any division and it will be hidden at start and will animate when devision appears on screen.

<div class=”animated fadeInLeftNow”>

Sample Division For fadeInLeftNow effect

</div>

 

You may also like...

Leave a Reply