Making an Apple-style Splash Screen

Demo Download

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.

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 CSS

We 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.

apple-style-splash-screen-jquery-css3.jpg

The jQuery

All 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!

Parting words

You can use the plugin to easily create your own stylish intro splash screens. You only need to remember to limit it only to one of your pages, as it will become annoying to the user if they have to sit through a 30 second intro on every page view. Also, using the textLayers parameter, you can turn it into a slide show with different product screenshots, which would be an interesting effect to see.

Be sure to share your ideas for this script in the comment section below.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles