The Beatles are on iTunes! Or, if you are like me and don’t care that much about it, you’ve probably noticed the awesome splash screen that Apple used to promote the event. Risking to start a trend, in this tutorial we are going to create a simple jQuery plugin that will display fancy Apple-style splash screens for us.
The HTML
Encapsulating the splash screen functionality into a jQuery plugin makes it portable and easy to incorporate into an existing website. But before starting work on the plugin files, we first need to lay down the HTML markup of a simple demonstration page, where the plugin is going to be used.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Splash Screen | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/splashscreen.css" />
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js" ></script>
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="page">
<div id="topBar"></div>
<div id="promoIMG">
<img src="img/available_now.png" alt="Available Now" />
</div>
<div id="contentArea">
<p>... The textual content ...</p>
</div>
</div>
</body>
</html>
Read more: TutorialZine
The HTML
Encapsulating the splash screen functionality into a jQuery plugin makes it portable and easy to incorporate into an existing website. But before starting work on the plugin files, we first need to lay down the HTML markup of a simple demonstration page, where the plugin is going to be used.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Splash Screen | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/splashscreen.css" />
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js" ></script>
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="page">
<div id="topBar"></div>
<div id="promoIMG">
<img src="img/available_now.png" alt="Available Now" />
</div>
<div id="contentArea">
<p>... The textual content ...</p>
</div>
</div>
</body>
</html>
Read more: TutorialZine