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
element.style.marginLeft = “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 
element.style.marginLeft = minus + howmuch + “px”;

}, distance);
}

 

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

 

Advertisements

23, 05 , 2014 - Posted by | Toate |

No comments yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: