jQuery Splitscreen Plugin

by NOVUSIDEA

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

CSS

body {background:...

JavaScript

html  = '<div id="splitscreen-wrapper">';
html += '<div id="splitscreen-left" class="split-bg">&nbsp;</div>';
html += '<div id="splitscreen-right" class="split-bg">&nbsp;</div>';
html += '<a id="splitscreen-enter" href="javascript:;">Enter Site</a>';
html += '</div>';

var duration = 1000;

$('body').append(html);

$('#splitscreen-wrapper').css({
    overflow: 'hidden',
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    zIndex: 999
});

$('#splitscreen-left').css({
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: '50%'
});

$('#splitscreen-right').css({
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    width: '50%'
});

$('#splitscreen-enter').css({
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: 0 - ($('#splitscreen-enter').height() / 2),
    marginLeft: 0 - ($('#splitscreen-enter').width() / 2),
}).click(function(){
    $('#splitscreen-left').animate({
        left: '-50%'
    }, duration);
    $('#splitscreen-right').animate({
        right: '-50%'
    }, duration);
    $(this).fadeOut(duration);
});