Edit in JSFiddle

var currentPageNumber = 1;
jQuery.easing.def = "linear";

$(document).ready(function() {
    $(".divContentContainer").center();
    AnimatePage1();
})

jQuery.fn.center = function() {
    this.css("position", "absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
};

var load = function(id) {
    $('.pages').empty();
    $(id).appendTo('.pages').show();
};

var AnimatePage1 = function() {
    load('#page-1');
    $('.page-1-img').animate({
        opacity: 100,
        width: "538px",
        height: "166px"
    }, 3000).fadeOut(1000, AnimatePage2);
};

var AnimatePage2 = function() {
    load('#page-2');
    $('.page-2-img').animate({
        opacity: 100,
        width: "698px",
        height: "151px"
    }, 3000).fadeOut(1000, AnimatePage3);
};

var AnimatePage3 = function() {
    load('#page-3');
    $('.page-3-img').animate({
        opacity: 100,
        width: "894px",
        height: "116px"
    }, 3000).fadeOut(1000, AnimatePage4);
};

var AnimatePage4 = function() {
    load('#page-4');
    $('.yours').animate({
        opacity: 100,
        width: "585px",
        height: "276px"
    }, 3000).fadeOut(1000, AnimatePage5);
};

var AnimatePage5 = function() {
    load('#page-5');
    $('.tommylogo').animate({
        opacity: 100,
        width: "960px",
        height: "120px"
    }, 3000);
};

<div class="container">
        <header>
        </header>
        <div class="divContentContainer">
            <div id="contentHome" style="display: table !important">
                <div class="pages centered" style="">
                </div>
            </div>
        </div>
        <div id="page-1" style="display: none">
            <img class="page-1-img" src="http://demos.webectron.com/tommychambers/resources/anim-a-house.png" width="100" height="31"
                style="opacity: 0" />
        </div>
        <div id="page-2" style="display: none">
            <img class="page-2-img" src="http://demos.webectron.com/tommychambers/resources/anim-not-home.png" width="100" height="22"
                style="opacity: 0" />
        </div>
        <div id="page-3" style="display: none">
            <img class="page-3-img" src="http://demos.webectron.com/tommychambers/resources/anim-until-we.png" width="131" height="17"
                style="opacity: 0" />
        </div>
        <div id="page-4" style="display: none">
            <img class="yours" alt="Yours" src="http://demos.webectron.com/tommychambers/resources/anim-yours.png" width="100" height="47"
                style="opacity: 0" />
        </div>
        <div id="page-5" style="display: none">
            <img class="tommylogo" alt="Tommy Chambers Interiors" src="http://demos.webectron.com/tommychambers/resources/anim-johndoe.png"
                width="360" height="45" style="opacity: 0" />
        </div>
        <footer>
        </footer>
    </div>

body
{
    background-color: #6d6d75 !important;
}

.pages
{
    background-color: #6d6d75 !important;
    color: #FFFFFF !important;
    background: none !important;
    font-size: 20px;
}

.divContentContainer
{
    background-color: #6d6d75 !important;
}

.centered
{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}