Make an Awesome 'Apple' Splash Screen Written by Sandro Albertisandro@fen-om.com Sandro is a Web designer/developer who enjoys educating others about design, both in theory and practice.
INTRODUCTION
Quick-and-dirty JQuery tutorial, to reproduce the process of the elegant splash screen used by Apple for its 2010 'Beatles on iTunes' campaign. In this splash screen, all of the Web content is initially hidden, except for a central image with a messaging slideshow. After all the messages appear in order, the entire Web page appears, with the splash-screen image retaining its position in the page. The effect is refined and elegant, making it appear as if a Web site has organically grown into place around the initial image.
THE CODE
All you'll need is a tiny bit of code your Web page, JQuery, two script files (to make the splash screen appear-transition-and-disappear), and a CSS file for look-and-feel: -----1. Setting up your page: The splash screen will basically hide all of your page content, except for one single image that will be kept in exactly the same spot during and after the splash-screen animation. In order to identify this image, you simply have to wrap it in a <div> with id=promoIMG. Here is code for a very basic sample Web page, showing where an image in the content is being wrapped within this <div>: <body> <div id="page"> <div id="topBar"></div> <div id="promoIMG"> <img src="our-image.jpg" alt="This Image Stays" /> </div> <div id="contentArea"> <p><img src="other-image.jpg" width="85" alt="sample">This is a demo. It was inspired by the effect that was, up until recently, part of the Apple.com home page. <br /><br />More text here.</p> </div> </div> </body>
You also need to style #promoIMG with the same image as its background: (JQuery will need this to duplicate the <div> on top of the image during the splash; note: the left float and margin styling is only necessary for the example page that I created for myself) #promoIMG{ background:url('../our-image.jpg') no-repeat; float:left; margin-left:15px; margin-right:15px; margin-top:5px; }
-----2. JQuery: Good practice: Instead of downloading JQuery to your directory, run it directly from Google by adding this line to the <head> of your Web page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
Page 1
-----3. Scripts: A single script file, as an 'anonymous function', will take care of all the action (jquery.splashscreen.js). The other script file simply feeds it the names of the images to run in the slideshow (script.js). Once you make these 2 files, you can insert them into the <head> of your Web page like this: <script src="js/jquery.splashscreen.js"></script> <script src="js/script.js"></script>
jquery.splashscreen.js: This file measures the initial location of an image on the page, quickly copying it to a splash image in the same location but in a top layer that hides the rest of the page. On this floating layer, a slideshow of three messaging images is also placed, and run: 1-fade-2-fade-3, and then fade to page. Save this code on its own JavaScript file, and call it with a <script> line in the head of your page: (function($){ //this will later make it possible to run $('#promoIMG').splashScreen $.fn.splashScreen = function(settings){ // default options settings = $.extend({ textLayers: [], textShowTime: 1500, textTopOffset: 45, textLeftOffset: 30 },settings); var promoIMG = this; // creating the splashScreen div with main image var splashScreen = $('<div>',{ id: 'splashScreen', css:{ backgroundImage: promoIMG.css('backgroundImage'), backgroundPosition: promoIMG.offset().left + 'px ' + 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 splashScreen.bind('changeText',function(e,newID){ if(settings.textLayers[newID]){ showText(newID); } else { splashScreen.click(); } }); splashScreen.trigger('changeText',0);
Page 2
// creating three text images function showText(id){ var text = $('<img>',{ src:settings.textLayers[id], css: { marginTop: promoIMG.offset().top + settings.textTopOffset, marginLeft: promoIMG.offset().left + settings.textLeftOffset + promoIMG.width() } }).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);
And here is the script.js that inserts the images to be used: $(document).ready(function(){ // Calling our splashScreen plugin and passing an image array $('#promoIMG').splashScreen({ textLayers : [ 'img/text1.png', 'img/text2.png', 'img/text3.png' ] }); });
-----4. Styling the splash screen. You can now add the final styling to the splash screen, defining its color, and the fact that it should cover the entire width and height of the screen, and positioning at screen 0,0 so that all measurements can be taken from the top-left corner of the screen: (note: the background color is unique to your taste; it will be the color that fills up most of the splash screen; z-index can be higher than 50 so that it appears on top of everything else) #splashScreen img{ margin:0 auto; } #splashScreen{ position:absolute; top:0; left:0; height:100%; width:100%; background-color:#ffffff; background-repeat:no-repeat; z-index:50; }
Page 3
WHAT IT LOOKS LIKE
As soon as the page opens, visitors are greeted by the focal promotional image and a 3-part splash slideshow; the rest of the page is filled with white space:
When the slideshow ends, the splash layer fades out, revealing the entire Web page around our focal promo image, which stays in place:
You can see a working sample here:
http://data.fen-om.com/tests/apple_splash/test.html
This is a great concept for focused use, where you can benefit from bringing a message to the forefront, that is closely linked to the message of a Web page. In order to make it less obtrusive, you can also easily read a cookie, so that the splash slideshow only appears to first-time visitors!
Page 4