Réaliser un Splash screen à la façon Apple : HTML, CSS, JS

Les Beatles étaient récemment sur iTunes ! Vous l’avez sans doute remarqué, mais si vous êtes comme moi, vous ne vous souciez pas beaucoup de ce sujet, vous avez probablement remarqué la fenêtre d’attente (Splash screen) impressionnante qu’Apple a utilisé pour promouvoir l’évènement. Je vais vous montrer, comme pour l’affichage du compte à rebours à la façon Apple, comment afficher de manière fantaisiste vos fenêtres d’attente pour une annonce sur votre site, en utilisant un plugin jQuery.

Description de l’article

Je vais vous donner un bref aperçu des mesures prises pour reproduire le compteur, mais pour ceux qui veulent aller droit au but, vous pouvez directement aller sur la page de démonstration. Le code source d’origine étant assez commenté, toute personne intéressée pourra voir la source et observer ce qui se passe pour le reproduire.

En revanche pour ceux qui souhaitent des instructions plus techniques n’hésitez pas à lire la suite de cet article.

Apple Splash Screen

Encapsulant les fonctionnalités de la fenêtre d’attente à l’aide du plugin jQuery, le code suivant est portable et facilement intégrable dans un site existant. Mais avant de commencer à travailler sur les fichiers du plugin, il faut d’abord mettre en place le code HTML et CSS sur une page simple de démonstration, où le plugin va être utilisé.

La structure HTML

[sourcecode language="html"]

<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.splashscreen.js"></script>
</head>

<div id="demoImg">
<img src="images/a_vous_de_jouer.png" alt="A vous de jouer !" />
</div>
[/sourcecode]

Le code HTML est très simple. Le code du plugin de la fenêtre d’attente est contenu dans jquery.splashscreen.js, que je détaillerais dans la dernière section. La div #demoImg a l’image de loading fixé comme arrière-plan (background). Ce sera cet élément que le plugin va rechercher au moment de l’appel.
Ce dernier va alors créer la fenêtre d’attente et se caler sur l’élément #demoImg, pour afficher le défilement du texte (par des images) au dessus.
Finalement, quand l’écran d’accueil est caché, on a l’impression que l’apparition de la page ce fait lentement en fondu.

Les styles CSS

Nous avons décomposer la partie CSS en deux :

  • La première est assez simple, et permet de définir l’apparence du Splash screen. Ce dernier remplira tout l’écran et la couleur du fond sera noire.
  • La seconde, concerne l’affichage de l’élément #demoImg et l’image associée en background. Dans mon exemple, j’associe l’image back-screen.jpg au background de la div et je définis sa position.
[sourcecode language="css"]
#splashScreen img{
margin:0 auto;
}
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#000;
background-repeat:no-repeat;
text-align:center;
}
#demoImg{
background:url(‘images/back-screen.jpg’) no-repeat;
height:538px;
margin-bottom:15px;
text-align:center;
}
#demoImg img{
margin-top:80px;
}
[/sourcecode]

Le JavaScript jQuery

Tout le code du plugin se trouve dans le fichier jquery.splashscreen.js. Il est important que le script soit chargé avant que tout le contenu soit affiché à l’utilisateur, sinon il verra le reste de votre page avant que la fenêtre d’attente s’affiche. D’ailleurs si vous ne respectez pas ceci, vos utilisateurs seront témoins de scintillements désagréables lors du lancement du Splash screen.

[sourcecode language="javascript"]
// A self-executing anonymous function,
// standard technique for developing jQuery plugins.
(function($){
$.fn.splashScreen = function(settings){
// Fournir les options par défaut
settings = $.extend({
textLayers : [],
textShowTime : 1500,
textTopOffset : 80
},settings);

var demoImg = this;

// Création de la div splashscreen.
// Le reste du style est dans la page index.php
var splashScreen = $(‘<div>’,{
id : ‘splashScreen’,
css:{
backgroundImage : demoImg.css(‘backgroundImage’),
backgroundPosition : ‘center ‘+demoImg.offset().top+’px’,
height : $(document).height()
}
});

$(‘body’).append(splashScreen);

splashScreen.click(function(){
splashScreen.fadeOut(‘slow’);
});

// Liaison d’un événement personnalisé pour modifier le texte actuel visible selon
// le contenu du tableau textLayers (passé en paramètre)
splashScreen.bind(‘changeText’,function(e,newID){
// Si l’image que nous voulons montrer, est
// dans les limites du tableau
if (settings.textLayers[newID]){
showText(newID);
}
else {
splashScreen.click();
}
});

splashScreen.trigger(‘changeText’,0);

// Extraction de la fonctionnalité dans une
// fonction distincte pour plus de commodité.
function showText(id){
var text = $(‘<img>’,{
src:settings.textLayers[id],
css: {
marginTop : demoImg.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);
[/sourcecode]

Lors de l’appel au plugin un seul paramètre est passé à l’objet. La seule propriété de ce paramètre qui est obligatoire est textLayers. Celle-ci doit être un tableau avec les URL de toutes les images qui seront affichées au dessus de l’élément demoImg. Libre à vous d’inclure le nombre d’images que vous souhaitez. Laissez votre imagination parler : il est tout à fait possible de faire un élégant diaporama…

Apple Splash Screen

Le this de la fonction, correspond à la div demoImg. Vous remarquez que le décalage (offset()) de l’image est pris en compte permettant de définir le décalage pour la fenêtre d’attente. Cela permet un alignement parfait et dans le même temps, nous évite d’avoir à passer le décalage en tant que paramètre, rendant le plugin plus robuste et générique.

Le plugin est déclaré de la manière suivante :

[sourcecode language="javascript"]
$(document).ready(function(){
// Calling our splashScreen plugin and
// passing an array with images to be shown
$(‘#demoImg’).splashScreen({
textLayers : [
'images/realiser_splach.png',
'images/screen_a_la.png',
'images/facon_apple.png'
]
});
});
[/sourcecode]

Il suffit d’appeler le Splash screen dès que la page est chargée, en évitant que la page web en entier s’affiche à l’utilisateur avant le lancement de la fenêtre d’attente. Le tableau d’images textLayers est déclaré et rempli à ce moment.

Voilà votre Apple Splash Screen Plugin est terminé !

Personnalisation

Vous pouvez utiliser ce plugin pour créer facilement vos propres fenêtres d’attente élégantes. Vous avez seulement besoin de vous souvenir de limiter à une seule de vos pages cet effet, car il va devenir ennuyeux pour l’utilisateur s’il doit passer 30 secondes par page pour avoir son contenu. Aussi, en utilisant le paramètre textLayers, vous pouvez en faire un diaporama avec des screenshots de produits différents, produisant un effet intéressant pour vos lecteurs.

Démos et téléchargement

Vous pouvez télécharger la démo de l'article dans un seul fichier ZIP.

Voilà j’espère que cet article vous plaira. Si vous avez des questions, des commentaires ou des suggestions, n’hésitez pas à laisser un commentaire, j’y répondrais.

Source

  • Victor

    Super ton article et ton mini plugin ! Bravo.
    (petite erreur dans le titre, c’est Splash pas Splach)

  • http://www.cv-developpeur-web2.com Yohann Poiron

    Merci Victor ! Il n’y avait pas que dans le titre… c’est corrigé ;)

    N’hésite pas à nous montrer ton / tes résultat(s) :)

  • Pingback: jQuery Apple Effect

  • kornfr

    bonjour,

    Merci !

    Comment fait ton pour accélérer ou ralentir l’effet lorsque le « Splash Screen » passe au site normale

    • http://www.cv-developpeur-web2.com Yohann Poiron

      J’ai pas compris, que souhaitez-vous ralentir ? L’effet d’arrivé du site ?

  • kornfr

    Oui tout a fait je voudrais ralentir l’effet d’arrivé du site (lorsque la couleur noir disparait)

    Merci

  • http://twitter.com/lanfyp spycom

    Et comment on empêche son affichage sur le site ensuite ?

    • http://www.blog-nouvelles-technologies.fr Yohann Poiron

      C’est-à-dire ?

      • http://twitter.com/lanfyp spycom

        Une fois le splash terminer,Il reste le background dans le div sur la page index. J’aimerais que lorsque le splash est terminée que celui-ci disparaisse pour laisser place à la page index.
        J’aimerais afficher cela: http://c-deb.franceserv.com/popup.php
        Et quand le splash à terminer afficher cela: http://www.efoot.biz/index.php