Animation bottom to top

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');

Leave a Reply

Your email address will not be published. Required fields are marked *