the animation bottom to top based on the style animation,it used in the java script function
The animation-element class is have the animation content
<div class="animation-element bounce-up cf">
<div class="subject development">
<div class="category-color"></div>
<div class="icon"><i class="fa fa-cogs"></i></div>
<div class="header cf">
<h4 class="date"><i class="fa fa-calendar-o"></i> April, 2015</h4>
<h4 class="category"><i class="fa fa-folder-o"></i> Development</h4>
</div>
<h3 class="title">Fundamentals of C++ Development</h3>
<div class="content">An introductory class on C++. This course will outline the basic elements required to understand development...</div>
<div class="enrole">Enrole</div>
</div>
</div>
the animation style is given below and the animation class in-view class added in the animation main div
.animation-element {
position: relative;
width: 30%;
margin: 0% 1.33 2.66% 1.33%;
float: left;
}
.animation-element:nth-of-type(3n-2) {
width: 31.5%;
margin: 0% 1.375% 2.75% 0%;
clear: left;
}
.animation-element:nth-of-type(3n-1) {
width: 31.5%;
margin: 0% 1.375% 2.75% 1.375%;
}
.animation-element:nth-of-type(3n-0) {
width: 31.5%;
margin: 0% 0% 2.75% 1.375%;
clear: right;
}
/*bounce up animation for the subject*/
.bounce-up .subject {
opacity: 0;
-moz-transition: all 700ms ease-out;
-webkit-transition: all 700ms ease-out;
-o-transition: all 700ms ease-out;
transition: all 700ms ease-out;
-moz-transform: translate3d(0px, 200px, 0px);
-webkit-transform: translate3d(0px, 200px, 0px);
-o-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate3d(0px, 200, 0px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.bounce-up.in-view .subject {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
the window scroll get the animation content position animation content height,window height and window position to calculated for added class. In the class to the animation animated bottom to top
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');