Animation mutirotate

the animation multirotate 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 multi-step-left cf">
      <div class="gallery">
        <h3 class="title">Johnthon Smith</h3>
        <h4 class="subtitle">Senior Enginer</h4>
        <div class="image" style="background-image: url(http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjVTdZcktRTWhNamM)">
          <div class="social">
            <i class="fa fa-facebook"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-google-plus"></i>
            <i class="fa fa-envelope"></i>
          </div>
        </div>
   </div>
</div>

the animation style is given below and the animation class in-view class added in the animation main div

Source code

/*animation element*/
 
.animation-element {
  position: relative;
  width: 22%;
  margin: 0% 1.5% 3% 1.5%;
  float: left;
}
/*4 grid layout*/
 
.animation-element:nth-of-type(4n-3) {
  clear: left;
}
 
.animation-element:nth-of-type(4n-2) {}
 
.animation-element:nth-of-type(4n-1) {}
 
.animation-element:nth-of-type(4n-0) {
  clear: right;
}
/*left fancy animastion*/
@-moz-keyframes left_animation {
  0% {
    opacity: 0;
    -moz-transform: rotate(180deg) translate3d(100%, 100%, 0);
  }
  75% {
    opacity: 0.8;
    -moz-transform: rotate(-40deg);
  }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg) translate3d(0%, 0%, 0);
  }
}
 
@-webkit-keyframes left_animation {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) translate3d(100%, 100%, 0);
  }
  75% {
    opacity: 0.8;
    -webkit-transform: rotate(-40deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg) translate3d(0%, 0%, 0);
  }
}
 
@keyframes left_animation {
  0% {
    opacity: 0;
    transform: rotate(180deg) translate3d(100%, 100%, 0);
  }
  75% {
    opacity: 0.8;
    transform: rotate(-40deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) translate3d(0%, 0%, 0);
  }
}
/*right fancy animation*/
 
@-moz-keyframes right_animation {
  0% {
    opacity: 0;
    -moz-transform: rotate(180deg) translate3d(-100%, -100%, 0);
  }
  75% {
    opacity: 0.8;
    -moz-transform: rotate(40deg);
  }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg) translate3d(0%, 0%, 0);
  }
}
 
@-webkit-keyframes right_animation {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) translate3d(-100%, 100%, 0);
  }
  75% {
    opacity: 0.8;
    -webkit-transform: rotate(40deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg) translate3d(0%, 0%, 0);
  }
}
 
@keyframes right_animation {
  0% {
    opacity: 0;
    transform: rotate(180deg) translate3d(-100%, -100%, 0);
  }
  75% {
    opacity: 0.8;
    transform: rotate(40deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) translate3d(0%, 0%, 0);
  }
}
 
/*Multi-step animation*/
 
.multi-step-left .gallery,
.multi-step-right .gallery {
 position: relative;
 opacity: 0;
 /*prevents flicker as animation occurs*/
}
 
.multi-step-left.in-view .gallery {
 -moz-animation: left_animation 1300ms ease-in both;
 -webkit-animation: left_animation 1300ms ease-in both;
 animation: left_animation 1300ms ease-in both;
}
 
.multi-step-right.in-view .gallery {
 -moz-animation: right_animation 1300ms linear both;
 -webkit-animation: right_animation 1300ms linear both;
 animation: right_animation 1300ms linear both;
}

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 mutirotate

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

Leave a Reply Cancel reply

HTML