Movie titles are surely a nice effect to achieve with jQuery. In this post I'm going to show you a simple implementation of this effect. There are virtually infinite combinations of effects to build up a demo using this feature. Here I'll use the fadeIn() and fadeOut() methods, but feel free to try even more solutions. First of all, our markup:
<div id="loader"> <img src="page-loader.gif" alt="" /> </div> <div id="screen"> <h1>jQuery presents</h1> <div id="title"> <h2>2011</h2> <p>The year jQuery broke</p> </div> </div>
I've inserted the AJAX loader directly in the markup to avoid any possible lag during page loading. Note that this image has no value for the alt attribute, so it will cause no side effects on assistive technologies.
In our CSS we're going to use a Google font called Slackey, so the first thing we need to do is to reference it in our head section:
<head> <link href='http://fonts.googleapis.com/css?family=Slackey' rel='stylesheet' type='text/css'> </head>
Here are our CSS styles:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
body {
color: #333;
background: #fff;
position: relative;
}
#screen {
font: 2em "Arial Narrow", Arial, sans-serif;
width: 600px;
padding: 2em 0;
margin: 0 auto;
}
#screen h1 {
margin: 0;
text-align: center;
font: normal 4em Slackey, sans-serif;
display: none;
}
#title {
padding: 1em 0;
width: 100%;
display: none;
}
#title h2 {
margin: 0;
height: 394px;
width: 100%;
background: url(screen-bg.jpg) no-repeat;
text-indent: -1000em;
}
#title p {
text-align: center;
margin: 0;
text-transform: uppercase;
text-shadow: 2px 2px 2px #aaa;
font-size: 1.5em;
}
#loader {
width: 66px;
height: 66px;
position: absolute;
top: 50%;
left: 50%;
margin: -33px 0 0 -33px;
}
#loader img {
display: block;
width: 100%;
height: 100%;
}
Our jQuery code will simply wait 3 seconds before hiding the page loader. Then it will show and hide all the elements with display: none in our page:
$(document).ready(function() {
setTimeout(function() {
$('#loader').fadeOut(1000, function() {
$('#screen h1').fadeIn(1000).delay(1000).
fadeOut(1000, function() {
$(this).next().fadeIn(1000);
});
});
}, 3000);
});
You can see the final result in the demo below.
WOW...*thumbsup