Question

i’m trying to create a diagonal line with jQuery that animates from top left corner of the screen to bottom right corner.
It would actually split the screen in half with diagonal line.
I was thinking to create a div 1px tall and 0 width, and then animate its width to 100%.
But i’m really confused with positioning this div.
I saw this effect on one page, and i’m sure it was not Flash, but i just can’t find it anymore.

Thanks

Mirko

Answer 1

Just as a quick guess, not really jQuery but what I can think of off the top of my head, you might want something like:

var diag = document.body.appendChild(document.createElement('div'));
diag.style.width = "1px";
diag.style.position = "fixed";
diag.style.left = diag.style.top = "0px";
diag.style.backgroundColor = "black";
diag.style.transformOrigin = "top left"; // add vendor extensions as needed
(window.onresize = function() {
    var w = window.innerWidth || document.documentElement.clientWidth,
        h = window.innerHeight || document.documentElement.clientHeight,
        a = Math.atan2(w,h),
        d = Math.sqrt(w*w+h*h);
    diag.style.height = d+"px";
    diag.style.transform = "rotate(-"+a+"rad)";
    // add vendor extensions as needed
})();

(Tested in IE9 using the msTransform and msTransformOrigin properties)