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