DEMO
Copy This CSS Code
/*------------------------------------------------*/
/*--------[GQ - CUSTOM FLY-IN ANIMATIONS]---------*/
/*------------------------------------------------*/
/* hide overflow */
.gq_s_slider1 {
overflow:hidden;}
/* font */
.gq_s_slider1 p {
color: #2aa6c2;
font-size: 46px;
line-height: 46px;
background: #ffffff;
padding: 7px 25px 14px;
display: inline-block;
display: -webkit-inline-box;
margin-bottom: 28px;
border-radius: 4px;}
/* offset padding */
.gq_text_slidein_r1 {padding-left: 20%;}
.gq_text_slidein_r2 {padding-left: 40%;}
.gq_text_slidein_r3 {padding-left: 60%;}
.gq_text_slidein_r4 {padding-left: 80%;}
.gq_text_slidein_l1 {padding-right: 20%;}
.gq_text_slidein_l2 {padding-right: 40%;}
.gq_text_slidein_l3 {padding-right: 60%;}
.gq_text_slidein_l4 {padding-right: 80%;}
/*code
gq-animated gq-waypoint gq_text_slidein_l2 gq_animation_left1
gq-animated gq-waypoint gq_text_slidein_r2 gq_animation_right1
*/
/* right */
.gq_animation_right1.gq-animated {
-webkit-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeRight 1.0 1 cubic-bezier(0.77, 0, 0.175, 1);}
.gq_animation_right2.gq-animated {
-webkit-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);}
.gq_animation_right3.gq-animated {
-webkit-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeRight 3 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);}
.gq_animation_right4.gq-animated {
-webkit-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeRight 3 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);}
/* left*/
.gq_animation_left1.gq-animated {
-webkit-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}
.gq_animation_left2.gq-animated {
-webkit-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}
.gq_animation_left3.gq-animated {
-webkit-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}
.gq_animation_left4.gq-animated {
-webkit-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}
/* keyframe animations */
@-webkit-keyframes GQfadeLeft {
0% {opacity: 0; -webkit-transform: translateX(-100%);}
100% {opacity: 1!important; -webkit-transform: translateX(0);}}
@-moz-keyframes GQfadeLeft {
0% {opacity: 0;-moz-transform: translateX(-100%);}
100% {opacity: 1!important; -moz-transform: translateX(0);}}
@-o-keyframes GQfadeLeft {
0% {opacity: 0; -o-transform: translateX(-100%);}
100% {opacity: 1!important; -o-transform: translateX(0);}}
@keyframes GQfadeLeft {
0% {opacity: 0; transform: translateX(-100%);}
100% {opacity: 1!important; transform: translateX(0);}}
@-webkit-keyframes GQfadeRight {
0% {opacity: 0; -webkit-transform: translateX(100%);}
100% {opacity: 1!important; -webkit-transform: translateX(0);}}
@-moz-keyframes GQfadeRight {
0% {opacity: 0; -mox-transform: translateX(100%);}
100% {opacity: 1!important; -moz-transform: translateX(0);}}
@-o-keyframes GQfadeRight {
0% {opacity: 0; -0-transform: translateX(100%);}
100% {opacity: 1!important; -o-transform: translateX(0);}}
@keyframes GQfadeRight {
0% {opacity: 0; transform: translateX(100%);}
100% {opacity: 1!important; transform: translateX(0);}}
USE THIS CSS CLASSES
FROM LEFT
gq-animated gq-waypoint gq_text_slidein_l1 gq_animation_left1
gq-animated gq-waypoint gq_text_slidein_l2 gq_animation_left2
gq-animated gq-waypoint gq_text_slidein_l3 gq_animation_left3
gq-animated gq-waypoint gq_text_slidein_l4 gq_animation_left4
FROM RIGHT
gq-animated gq-waypoint gq_text_slidein_r1 gq_animation_right1
gq-animated gq-waypoint gq_text_slidein_r2 gq_animation_right2
gq-animated gq-waypoint gq_text_slidein_r3 gq_animation_right3
gq-animated gq-waypoint gq_text_slidein_r4 gq_animation_right4
COPY THIS SCRIPT PUT IN BODY
<script>
(function($) {
var $animation_elements = $('.gq-waypoint'),
$window = $(window);
function check_if_in_view() {
var window_height = $window.height(),
window_top_position = $window.scrollTop(),
window_bottom_position = (window_top_position + window_height);
$animation_elements.each(function() {
var $element = $(this),
element_height = $element.outerHeight(),
element_top_position = $element.offset().top,
element_bottom_position = (element_top_position + element_height);
//check to see if this element is within viewport
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
$element.addClass('gq-animated');
} else {
$element.removeClass('gq-animated');
}
});
}
$window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>
