| ||||||||||
| By dowloading you accept our Terms & Disclaimer. |
| Instructions: |
The HTMLEncapsulating 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. index.html<!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>Notice that I’ve placed the script tags in the head section. Usually it is best to include them in the body, after all the other content, as otherwise the page rendering blocks while the js files are being downloaded and our visitor is left staring at a blank screen. This time, however, this is a necessary evil, as we need to be sure that nothing of the page is going to be shown to the user before we show the splash screen. The code of the splash screen plugin is contained in jquery.splashscreen.js, which we will be discussing in the last section. The plugin depends on splashcreen.css, which defines some useful styles. You can see the stylesheet in the next section of the tutorial. The #promoIMG div has the MacBook illustration set as its background. This is what our plugin is going to be looking for, when we call it. It will then create a splash screen div and set the illustration as its background, offsetting it so it aligns with the #promoIMG div below it. Finally, when the splash screen is hidden, we are left with the impression that the page around it slowly fades in. The CSSWe have two distinct stylesheets – styles.css and splashscreen.css. The first one is pretty straightforward, and as it is only used to style the underlying page, is of no interest to us and will not be discussed here. The styles that define the looks of the splash screen are separated in their own file – splashcreen.css, which you can see below. splashscreen.css#splashScreen img{
margin:0 auto;
}
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#252525;
background-repeat:no-repeat;
text-align:center;
}In the fragment above, we are basically saying that the stylesheet div is positioned absolutely with relation to the document window and that it should take the full width and height of the page. The background color is the same as the one of the MacBook illustration, which we are using as a background image, as you will see in a moment.
The jQueryAll of the plugin code resides in jquery.splashscreen.js. As I mentioned in the first section of the tutorial, it is important that the script is loaded before any content is shown to the user, otherwise they will witness a somewhat unpleasant flicker when the splashscreen is shown. jquery.splashscreen.js
// A self-executing anonymous function,
// standard technique for developing jQuery plugins.
(function($){
$.fn.splashScreen = function(settings){
// Providing default options:
settings = $.extend({
textLayers : [],
textShowTime : 1500,
textTopOffset : 80
},settings);
var promoIMG = this;
// Creating the splashScreen div.
// The rest of the styling is in splashscreen.css
var splashScreen = $('<div>',{
id : 'splashScreen',
css:{
backgroundImage : promoIMG.css('backgroundImage'),
backgroundPosition : 'center '+promoIMG.offset().top+'px',
height : $(document).height()
}
});
$('body').append(splashScreen);
splashScreen.click(function(){
splashScreen.fadeOut('slow');
});
// Binding a custom event for changing the current visible text according
// to the contents of the textLayers array (passed as a parameter)
splashScreen.bind('changeText',function(e,newID){
// If the image that we want to show is
// within the boundaries of the array:
if(settings.textLayers[newID]){
showText(newID);
}
else {
splashScreen.click();
}
});
splashScreen.trigger('changeText',0);
// Extracting the functionality into a
// separate function for convenience.
function showText(id){
var text = $('<img>',{
src:settings.textLayers[id],
css: {
marginTop : promoIMG.offset().top+settings.textTopOffset
}
}).hide();
text.load(function(){
text.fadeIn('slow').delay(settings.textShowTime).fadeOut('slow',function(){
text.remove();
splashScreen.trigger('changeText',[id+1]);
});
});
splashScreen.append(text);
}
return this;
}
})(jQuery);The plugin is passed a settings object. The only property of this object that is required is textLayer. This property should be an array with the URLs of all the images with promo phrases that fade in and out above the MacBook illustration. You can make this array arbitrary long, and even put any kind of images there, not just containing text. You could even turn it into a stylish slideshow. The this of the function corresponds to the promoIMG div. Notice how we take the offset of the image from the top of the page with the offset() method on line 25, and set it as the offset of the background image on the splash screen. This gives us perfect alignment and in the same time frees us from having to pass the offset as a parameter, making the plugin more robust. You can see how the plugin is used in the fragment below: script.js
$(document).ready(function(){
// Calling our splashScreen plugin and
// passing an array with images to be shown
$('#promoIMG').splashScreen({
textLayers : [
'img/thinner.png',
'img/more_elegant.png',
'img/our_new.png'
]
});
});What is left is to only call the splash screen plugin. The document ready event is perfect for the task, as it is called before the page is visible to the user and we can safely display the screen straight away. With this our Apple-like Splash Screen Plugin is complete! |
|
0 留言:
發佈留言
您使用留言則表示同意及遵守使用條款及守則。
建議: 為方便留言回覆，請不要用匿名方式 留言。