Alt-Web Design & Publishing
jQuery Fading Logo and Page Redirect
example:
description:
Using jQuery, a blank white page fades in to reveal a logo, pauses for 3.5 seconds, fades out and redirects visitors to a new URL.
Method:
jQuery Script
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
CSS Code
body {
margin:0;
padding:0;
background-color:#FFCE9D;
display: none;
text-align:center;
/**HORIZONTAL AND VERTICAL CENTERING**/
width: 50%; /*exactly half of screen width**/
height: 50%; /*exactly half of screen height**/
position: absolute;
left: 25%; /*half the width of your container*/
top: 25%; /*half the height of your container*/
overflow:auto;/*scrollbars appear when needed*/
}
HTML & jQuery Function Code
<body>
<!--your fading message or image here -->
<p>Your message or logo goes here</p>
<img src="logo.jpg />
<p>This page will automatically redirect in 3-1/2 seconds.</p>
<!--change window.location = to 'http://yourdomain.com' -->
<script type="text/javascript">
$(function() {
$('body').fadeIn(3000, function() {
$(this).delay(3500).fadeOut(2000, function() { window.location = 'http://yourdomain.com'; });
});
});
</script>
<noscript>This is an <a href="http://yourdomain.com">alternate text link</a>for browsers with JavaScript disabled.</noscript>
</body>
