Two words…

Two words … nothing else

How to build a `slide in left` effect in javascript…

For the begining I’ll create a alternative version of HTMLElement cause IE8 works with Element instead.

var elementPrototype = typeof HTMLElement !== “undefined” ? HTMLElement.prototype : Element.prototype;


So what we need for this kind of effect? Lot of things and not… My 1st try was using the transform property but as ie8 was to lazy to recognize that I used margin-left.


We will extend our element with a new function. This is my favorite part from programing under JS.

elementPrototype.slideInLeft=function(time_in_seconds) {
time_in_seconds*=300;  // we get our time in s and multiply it with 300 – you can use 1000 for real seconds
var element = this; //this is my element which will fly in page
var distance = 20; // distance for each loop
var minus = “-“;    //static variable 
var timer = setInterval(function () {
if (time_in_seconds == 0) {
clearInterval(timer); // if I got to 0 (you can try lower than 0) then i want to set it to margin-left:0 and clear the timeout = “0px”;

time_in_seconds -= distance;     //our time will lose a bit of ‘distance’
minus = time_in_seconds <= 0 ? “” : minus; //if is less than 0 we get rid of that sign cause IE 8 doesn’t support -0px
var howmuch = time_in_seconds <= 0 ? 0 : time_in_seconds; //this will tell us how much we will move = minus + howmuch + “px”;

}, distance);


pretty simple when you use jquery or css3? but with skills when come to use real code


23, 05 , 2014 Posted by | Toate | | Leave a comment