Diagonal Animations

by Matt Webb

HTML

<div id="wrapper">
    <div class="mask">
        <div class="item" id="item-3">
            <div class="inner">Damn</div>
        </div>
    </div>

    <div class="mask">
        <div class="item" id="item-2">
            <div class="inner">Fucking</div>
        </div>
    </div>

    <div class="mask">
        <div class="item" id="item-1">
            <div class="inner">Hot</div>
        </div>
    </div>
    
    <div class="rounding-fix" id="vl-rounding-fix"></div>
    <div class="rounding-fix" id="vr-rounding-fix"></div>
    <div class="rounding-fix" id="ht-rounding-fix"></div>
    <div class="rounding-fix" id="hb-rounding-fix"></div>
</div>

<p id="test"></p>

CSS

#wrapper {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

#wrapper .mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    cursor: pointer;
    
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: rotate(45deg);
}

#wrapper .mask .item {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    
    -webkit-transform: rotate(-45deg);
}

#wrapper .mask .item#item-1 {
    background-color: #ff0;
}

#wrapper .mask .item#item-2 {
    background-color: #f0f;
}

#wrapper .mask .item#item-3 {
    background-color: #0ff;
}

#wrapper .mask .item .inner {
    font: normal normal bold 24px/300px helvetica, arial, sans-serif;
    text-align: center;
}

#wrapper .rounding-fix {
    position: absolute;
    background-color: #fff;
}

#wrapper #vl-rounding-fix {
    top: 0px;
    left: 0px;
    width: 1px;
    height: 100%;
}

#wrapper #vr-rounding-fix {
    top: 0px;
    right: 0px;
    width: 1px;
    height: 100%;
}

#wrapper #ht-rounding-fix {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
}

#wrapper #hb-rounding-fix {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
}

JavaScript

var $wrapper = $('#wrapper'),
    $mask = $('.mask'),
    $item = $('.item'),
    iw = $wrapper.outerWidth(),
    ih = $wrapper.outerHeight(),
    h1 = Math.round(Math.sqrt(Math.pow(iw, 2) / 2)),
    h2 = Math.round(Math.sqrt(Math.pow(ih, 2) / 2))
    mw = h1 + h2,
    mh = mw,
    mx = Math.floor(iw / 2),
    my = -mx;

$mask.css({
    'top': my + 'px',
    'left': mx + 'px',
    'width': mw + 'px',
    'height': mh + 'px'
});

$item.css({
    'top': Math.round((mh - ih) / 2) + 'px',
    'left': Math.round((mw - iw) / 2) + 'px',
    'width': iw + 'px',
    'height': ih + 'px'
});

$mask.on('click', function(e) {
    $(e.currentTarget).animate({'width': '0px'}, 666, 'swing');
});