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.
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
…
<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
#demoImget l’image associée en background. Dans mon exemple, j’associe l’imageback-screen.jpgau background de ladivet je définis sa position.
#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.
// 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…
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 :
$(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.
