responsive 'x' design

by kthornbloom

HTML

<div class="wrap"> <a href="#" class="title-left">WEB</a>
 <a href="#" class="title-right">PRINT</a>

    <div class="angle-left"></div>
    <div class="angle-right"></div>
</div>

CSS

body {
    background:#1B1F21;
    font-family:sans-serif;
}
.wrap {
    height:100vh;
    width:100vw;
    overflow:hidden;
    position:relative;
}
.angle-left, .angle-left-alt {
    background:rgba(222, 226, 232, 0.05);
    height:100vh;
    width:200vw;
    left:0px;
    top:0;
    transform-origin:0 0;
    transition-timing-function:ease-out;
    position:absolute;
}
.angle-right, .angle-right-alt {
    background:rgba(222, 226, 232, 0.05);
    height:100vh;
    width:200vw;
    right:0px;
    top:0;
    transform-origin:100% 0;
    transition-timing-function:ease-out;
    position:absolute;
}
.title-left, .title-right {
    position:absolute;
    font-size:50px;
    line-height:1em;
    text-align:center;
    color:#fff;
    display:block;
    width:50vw;
    left:0;
    top: 50%;
    transform: translateY(-50%);
    text-decoration:none;
    box-sizing:border-box;
    padding:0 5% 0 0;
}
.title-right {
    left:auto;
    right:0;
    padding:0 0 0 5%;
}
}

JavaScript

function angleSetter() {
    var winHeight = $(window).height(),
        winWidth = $(window).width(),
        winHypotenuse = Math.sqrt((Math.pow(winHeight, 2)) + (Math.pow(winWidth, 2))),
        leftAngle = Math.atan((winHeight / winWidth)) * 57.3,
        rightAngle = Math.atan((winWidth / winHeight)) * 57.3;

    $('.angle-left').css({
        transform: 'rotate(' + (leftAngle) + 'deg)',
        width: winHypotenuse + 'px'
    });

    $('.angle-right').css({
        transform: 'rotate(' + (rightAngle - 90) + 'deg)',
        width: winHypotenuse + 'px'
    });
}

angleSetter();

window.onresize = function () {
    angleSetter();
}

$(document.body).on('click', '.angle-left', function (e) {
    $(this).removeClass().addClass('angle-left-alt');
    $(this).css({
        transition: 'all .5s',
        transform: 'rotate(0deg)',
        background: 'rgba(222, 226, 232, 1)'
    });
});
$(document.body).on('click', '.angle-right', function (e) {
    $(this).removeClass().addClass('angle-right-alt');
    $(this).css({
        transition: 'all .5s',
        transform: 'rotate(0deg)',
        background: 'rgba(222, 226, 232, 1)'
    });
});

$(document.body).on('click', '.angle-left-alt', function (e) {
    $(this).removeClass().addClass('angle-left');
    $(this).css({
        transform: '',
        background: ''
    });
    angleSetter();
    setTimeout(function () {
        $('.angle-left').css('transition', '');
    }, 500);
});

$(document.body).on('click', '.angle-right-alt', function (e) {
    $(this).removeClass().addClass('angle-right');
    $(this).css({
        transform: '',
        background: ''
    });
    angleSetter();
    setTimeout(function () {
        $('.angle-right').css('transition', '');
    }, 500);
});