fermer
DéveloppementWeb

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.

[samples id=”1276″]

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

Tags : Applecsshtmljssamplessplash screen
Yohann Poiron

The author Yohann Poiron

J’ai fondé le BlogNT en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu’architecte interopérabilité.