0

Im looking for a way to start up the site with the logo in a div, centered on a page with the rest of the content hidden. Then, I want the logo to move to its final resting place on the top left of the container div which is centered on the page. Im using jQuery to do this, but haven't really found a way. Heres what I got, that really isnt doing what I want:

<style type="text/css">
div#container {
margin: 0px auto;
width: 1024px;
border: 1px solid green;
}

div#logo {
padding: 10px;
border: 1px solid red;
height: 100px;
width: 500px;
z-index: 9999;
background: red;
}

section#main-content {
border: 1px solid blue;
width: 1024px;
z-index: 1;
}

.centered{
    display:block;

    /*set the div in the center of the screen*/
    position:absolute;
    top:50%;
    left:35%;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#logo').hide();
    $('#main-content').hide();  
    $('#logo').addClass('centered').fadeIn('slow'); 
    $("#logo").animate({"top":"-=370px", "left":"-=270px"},1500) .delay(5000) .animate({"opacity":"100"},5000);
    $('#main-content').fadeIn();
    $('#logo').removeClass('centered'); 

});
</script>
</head>

<body>

<div id="container">
<header>
    <div id="logo">HEY</div>
</header>
<section id="main-content">
    <article>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi vitae nulla aliquam iaculis ut eget turpis. Aliquam gravida nisi ut felis convallis a consequat urna consequat. Nam sit amet dolor leo, eget rhoncus nisi. Ut et metus lacus, sit amet pretium enim. Etiam ac odio ut augue dapibus facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam mattis, sapien euismod convallis vulputate, diam tellus semper erat, vitae hendrerit quam sem sed odio. Quisque eget lectus ligula, sit amet lobortis augue.
            </p>
            <p>
            Cras ut est eget mi interdum fringilla eget vehicula elit. Integer convallis mattis odio, facilisis volutpat velit commodo viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque feugiat libero ac augue porta sodales. Mauris pulvinar augue at ante molestie ac malesuada ipsum lobortis. Mauris risus erat, cursus in interdum a, facilisis vitae felis. Curabitur augue velit, luctus posuere molestie ut, vehicula vel dui. Quisque et convallis elit. Proin bibendum varius molestie.
            </p>
            <p>
            Vivamus egestas rutrum lectus ut lacinia. Etiam magna metus, tristique ac bibendum vitae, semper tempor velit. Praesent dictum lacinia aliquam. Proin cursus, mauris eu bibendum sagittis, sem mauris faucibus orci, a elementum ipsum lectus sed mi. Donec vitae pharetra eros. Morbi vulputate, metus fermentum vestibulum varius, eros mauris facilisis sem, a elementum risus dui ac mi. Ut gravida tristique sodales. Nullam consequat euismod tellus tincidunt dictum. Duis vitae neque metus. Donec sodales diam eu massa ultricies in convallis nisl tempor. Morbi eu hendrerit nulla. Mauris dignissim, magna vitae volutpat sollicitudin, orci felis ornare turpis, quis ullamcorper risus sem vitae lectus. Donec fermentum elementum eros, vel sollicitudin est tempor in.
            </p>
            <p>
            Donec ornare tellus lectus. Integer ornare justo in augue sodales sit amet tempus mi varius. Morbi fringilla urna quis quam auctor id lacinia erat lobortis. Praesent ullamcorper nulla eget lectus hendrerit nec fermentum lectus viverra. Etiam quis velit velit. Phasellus ultrices leo ut sem commodo sed semper sem laoreet. Vivamus euismod imperdiet nibh eu convallis. Maecenas facilisis pellentesque mauris, a ornare nulla sagittis at. Donec turpis ipsum, scelerisque vitae pharetra ac, commodo vel metus. Morbi sollicitudin, mauris non rhoncus ultricies, mi orci euismod velit, quis sagittis turpis magna ac nulla. Curabitur commodo accumsan molestie.
            </p>
    </article>
</section>

1 Answer 1

0
$(document).ready(function() {

    $('#logo').hide();
    $('#main-content').hide();  
    $('#logo').addClass('centered').fadeIn('slow'); 
    $("#logo").animate({"top":"-=370px", "left":"-=270px"},1500).delay(5000);


    setTimeout(function(){
       $('#logo').removeClass('centered');
    }, 2000);
    setTimeout(function(){
       $('#main-content').show();
    }, 3000);
});
1
  • Just be careful that with a JS only solution, you may get a screen flicker, as the JS itself would take time to load in. Best to hide it with CSS first which can get to the DOM quicker than jQuery. There are obviously pro's and con's to this (accessibility) but then this depends on your audience and purpose. Nov 30, 2012 at 14:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.