Tiago Tiago - 5 months ago 44
CSS Question

Animation effect slide (with jQuery and CSS)

I've used one template from W3 Schools in order to build a theme with Bootstrap for WordPress
http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

One feature is the animation to slide some elements within a div in the webpage as you scroll it, using jQuery.
Currently the animation is implemented only from bottom to top, but I'm struggling to implement from right to left and vice versa as well.

Here is the code already working for bottom to top animation:



jQuery(function($) {
$(window).scroll(function () {
$(".slideanim-bottom").each(function () {
var pos = $(this).offset().top;

var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
});

.slideanim {
visibility: hidden;
}

.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}

@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}

@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}

<div class="row slideanim-bottom">





Does anyone know how to implement the same thing for left to right and vice versa as well? I think it is just a matter of adding some code in the js.

Thanks!

Answer

Just change translateY to translateX like this:

@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateX(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateX(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

With code above you will get animation from right to left.

If you want animation from left to right than set negative percentage.

For example: -webkit-transform: translateX(-70%);

Also, because you do horizontal animations there will be visible horizontal scroller while animation plays so you should set overflow:hidden for your cointainer.
In your case it is .container-fluid class.

You can see full example on your template page here: https://jsfiddle.net/uzxbn9da/

Comments