Daniel Ramirez-Escudero Daniel Ramirez-Escudero - 5 months ago 27
Javascript Question

How to create dynamic diagonal line from left-bottom to right-top corner?

I've created a simple layout where I have three divs which interact. One is the logo in the middle of the screen and the other are two blocks which with jQuery are moved out of the screen. I used the

skew
option from CSS to apply a degree transformation. I would like to apply the certain degree depending on the screen, so this degree will apply to all screens correctly.

Visual example: http://jsfiddle.net/6a93T/1/

For now I have this code:

HTML:

<html>
<header>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jq.animation.js"></script>
</header>
<body>
<div id="preloader">
<div id="blocktop"></div>
<div id="logo"></div>
<div id="loadline"></div>
<div id="blockbottom"></div>
</div>
</body>
</html>


CSS:

html{
overflow: hidden;
}


#preloader{
width: 100%;
height: 100%;
}

#logo{
background-image: url('../img/logotest.png');
width: 300px;
height: 300px;
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
z-index: 1000;
}


#blocktop{
background-color: #fff4ed;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: -50%;
z-index: 10;

transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}

#blockbottom{
background-color: #ff7f33;
width: 100%;
height: 100%;
position: absolute;
bottom: 0px;
right: -50%;

transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);

}


jQuery:

$(document).ready(function(){

/*$("button").click(function() */
setTimeout(function(){

$("#blocktop").animate({
left: '-120%',
opacity: '0'},
800
);

$("#blockbottom").animate({
right: '-120%',
opacity: '0'},
800
);


$('#logo').fadeOut('700')
},2000);

});

Answer

Use trigonometry to compute the desired angle:

var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');

(Note for math geeks and other pedants: the arctangent would normally take the height divided by the width, not the other way around. In this case, however, we're skewing a vertical line instead of a horizontal one, so the above code gives the desired result.)

Note that newer versions of jQuery will automatically add the necessary -webkit- or -moz- prefix to that CSS transform property.

You might also want to display:none the elements until the above code can alter the angle, and then show() them immediately after the angle is computed:

$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
    .add('#logo').show();

http://jsfiddle.net/mblase75/6a93T/10/