Animation left to right

the animation-element class div is used for the animation content

<div class="animation-element slide-left testimonial">
      <div class="header">
        <div class="left">
          <img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjV3BseTMtcEU1T2M" />
        </div>
        <div class="right">
          <h3>Joanna Hammerlton</h3>
          <h4>Marketing Manager - Omega Creative</h4>
        </div>
      </div>
   </div>

the animation-element div style added for the animation

Source code

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
 
.animation-element.slide-left.in-view {
  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);
}
.animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  background: #F5F5F5;
  padding: 15px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
 
.animation-element.slide-left.testimonial:nth-of-type(odd) {
  width: 48.5%;
  margin: 0% 1.5% 3.0% 0%;
}
 
.animation-element.slide-left.testimonial:nth-of-type(even) {
  width: 48.5%;
  margin: 0% 0% 3.0% 1.5%;
}

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 left to right

Source code

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

the animation can uses the window scroll based on the content to be viewed in the left to right

Leave a Reply Cancel reply

HTML