Comment réaliser un splashscreen pour un site ?

Sur un site web, il peut être utile, quand un visiteur arrive sur une page, de proposer de se connecter au Facebook lié au site, de s’inscrire à la newsletter ou de cliquer sur une publicité. Et souvent cela se fait par l’intermédiaire d’un splashscreen (a.k.a. page de garde ou page d’attente). Dans cet article nous allons voir comment faire cela avec un peu de jQuery et un peu de CSS.

Splashscreen : mettre en place l’overlay

Avant de mettre notre contenu, commencons par mettre en place un overlay qui prendra comme les mêmes dimensions que la fenêtre. On lui assigne une couleur noir avec une opacité de 80% et on la positionne au dessus de tout ce qui pourrait être à l’écran.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$('body').append('<div id="overlay"></div>');
$('#overlay').css({
  'width' : $(window).width(),
  'height' : $(window).height(),
  'background-color':'#000000',
  'display': 'block',
  'left': 0,
  'opacity': 0.8,
  'position': 'absolute',
  'top': 0,
  'z-index': 9999
});

Le souci est que si le corps (body) de la page est plus grand, les gens vont pouvoir descendre et ne plus voir l’overlay. Dans ce cas, on va les empecher de scroller en bloquant l’overflow.

1

$('body').css('overflow', 'hidden');

Affichage de notre contenu

Maintenant que l’on a un overlay, on peut afficher notre contenu qui sera dans la DIV #divSplashScreen. Le contenu est donc placé au centre de l’écran que ce soit en hauteur ou en largeur. Et avec un z-index de 10000, il passe au dessus de l’overlay.

1
2
3
4
5
6
7
8

$('#divSplashScreen').css({
  'top' : ($(window).height() - $('#divSplashScrenn').height()) / 2,
  'width' : '100%', 
  'left': 0,
  'position': 'absolute',
  'text-align': 'center',
  'z-index': 10000
});

Le tout suivi d’un petit effet pour l’affichage :

1

$('#divSplashScreen').fadeIn();

A noter qu’au chargement de la page, la DIV #divSplashScreen doit être caché (‘ display:none ‘) pour profiter de l’effet.

Et pour la fermer ?

Pour cela, il faut utiliser une fonction qui va tout remettre à la normale : que ce soit l’overflow du body, cacher le splashscreen et supprimer l’overlay.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var evtClose = function() {
  // Body en mode Overflow normal
  $('body').css('overflow', 'auto');
  // Splashscreen
  $('#divSplashScreen').hide();
  // Overlay
  $('#overlay').remove();
  // Focus sur le body pour récupérer le fonctionnement des touches directionnels
  $('body').focus();
};

Au niveau des évènements, on peut faire plusieurs choses :
Soit lors du clic sur l’overlay :

1

$('#overlay').on('click', evtClose);

Soit lors du clic sur le splashscreen :

1

$('#divSplashScreen').on('click', evtClose);

Soit lors du clic sur une croix en haut à droite du splashscreen :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// On récupère la taille du splashscreen
var widthSplashScreen = $('#divSplashScreen').width();
// On colle dans le splashscreen un span
$('#divSplashScreen').append('<span id="splashScreen_close"></span>');
// On le positionne 
$('#splashScreen_close').css({
  'right' : ($('body').width() - widthSplashScreen) / 2 + 5,
  'background-image': 'url("url of your image.png")',
  'cursor': 'pointer',
  'display': 'inline-block',
  'height': '14px',
  'position': 'absolute',
  'top': '10px'
  'width': '13px'
});
// On lui adjoint l évènement de fermeture
$('#splashScreen_close').on('click', evtClose);

Conclusion

Et voilà, avec cela, cela devrait marcher du tonnerre. Pensez à mettre votre code plutôt dans le window.load de votre page que dans le document.ready car ainsi si votre splashscreen contient des images, elles seront chargées correctement.