jQuery (et PHP) – Splashscreen

LEÇON

 

Principes de base

Faire apparaître, mais seulement la première fois qu'on visite la page d'accueil dans la même session, une image et/ou texte promotionnel qui couvre entièrement la page d'accueil.

Quand on revisite la page d'accueil le Splashscreen ne s'affiche pas. Par contre la prochaine fois (par exemple un autre jour) qu'on visite le site le Splashscreen s'affiche. Ce comportement doit être contrôlé via PHP et un variable de session (comme on a vu pour l'implémentation d'un panier d'achat).

 

Exemple

Site avec page d'accueil et une autre page. La page d'accueil comporte un Splashscreen promotionnelle.

Pour virer le Splashscreen cliquer le lien en haut à droite. Pour revoir le Splashscreen il faut fermer et rouvrir le navigateur.

http://www.web-design-codex.fr/samples/splashscreen/index.php

IMPORTANT : pour recréer l'exemple il faudrait avoir le fichier jquery-1.12.4.js (ou version supérieure) présent dans le même dossier que tous les autres fichiers. Si version supérieure, il ne faut pas oublier d'adapter l'attribut "src" de la balise "script" qui fait l'inclusion de ce fichier.

-- Fichiers images de l'exemple

Image affichée dans le Splashscreen

-- Le code de l'exemple

index.php


<?php
session_start();
$afficher_splashscreen = true;
if (isset($_SESSION["splashvu"]))
{
  $afficher_splashscreen = false;
}
$_SESSION["splashvu"] = 1;
?>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Splashscreen</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="splashscreen.css">
		<script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>
		<script type="text/javascript" language="JavaScript" src="splashscreen.js"></script>
    </head>
	
    <body>
        
		<!-- ==================================== CONTENU : SPLASHSCREEN =================================== -->
		
		<?php if($afficher_splashscreen) { ?>
		
		<div id="splashscreen">

			<div id="acces-site" ><a href="javascript:fermerSplashscreen();">Accéder directement au site</a></div>
			<img src="splashscreen.jpg">

		</div>
		
		<?php } ?>
		
		<!-- ================================== CONTENU : PAGE PRINCIPALE ================================== -->
		
        <div id="main">
		
			<h3>Page d'accueil</h3>
			
			<div id="menu">
				<ul>
					<li><a href="index.php">Accueil</a></li>
					<li><a href="autrepage.html">Une autre page</a></li>
				<ul>
			</div>
			
			<h5>Lorem ipsum dolor</h5>
			<p>
			Consectetur adipiscing elit. Phasellus vestibulum lacinia dui, vitae semper enim accumsan nec. Duis ut imperdiet mi. In et scelerisque est. Praesent a libero auctor, aliquet tortor at, egestas dolor. Quisque in sem quis diam convallis ultricies. Etiam posuere elit non gravida tristique. Aliquam eu sodales purus. Fusce sodales purus quis turpis condimentum, et semper enim dignissim.
			</p>
			<h5>Duis leo libero</h5>
			<p>
			Mauris malesuada, augue id viverra varius, sem ex consectetur nulla, eget interdum eros quam sed justo. Phasellus pharetra nisl a sollicitudin gravida. Phasellus placerat nunc erat, et fermentum dolor consequat in.
			</p>
			
		</div>

		<!-- =============================================================================================== -->
		
    </body>
</html>

 

autrepage.html


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Splashscreen</title>
		<link rel="stylesheet" type="text/css" href="style.css">
    </head>
	
    <body>
        
        <div id="main">
		
			<h3>Une autre page</h3>
			
			<div id="menu">
				<ul>
					<li><a href="index.php">Accueil</a></li>
					<li><a href="autrepage.html">Une autre page</a></li>
				<ul>
			</div>
			
			<h5>Gravida pharetra nisl</h5>
			<p>
			Phasellus placerat nunc erat, et fermentum dolor consequat in. Mauris malesuada, augue id viverra varius, sem ex consectetur nulla, eget interdum eros quam sed justo. Phasellus pharetra nisl a sollicitudin gravida. 
			</p>
			<h5>Libero aliquet tortor</h5>
			<p>
			Duis ut imperdiet mi. In et scelerisque est. Praesent a libero auctor, aliquet tortor at, egestas dolor. Quisque in sem quis diam convallis ultricies. Etiam posuere elit non gravida tristique. Aliquam eu sodales purus. Fusce sodales purus quis turpis condimentum, et semper enim dignissim. Consectetur adipiscing elit. Phasellus vestibulum lacinia dui, vitae semper enim accumsan nec.
			</p>
			<h5>Aliquam eu sodales purus</h5>
			<p>
			Praesent a libero auctor, aliquet tortor at, egestas dolor. Quisque in sem quis diam convallis ultricies. Etiam posuere elit non gravida tristique. Aliquam eu sodales purus. Fusce sodales purus quis turpis condimentum, et semper enim dignissim.
			</p>
			
		</div>
		
    </body>
</html>

 

splashscreen.js


function fermerSplashscreen()
{
	$('#splashscreen').fadeOut(250);
}

 

style.css


body
{
	background-color:#dddddd;
	font-family:Arial, sans-serif;
	margin:0;
	padding:0;
}

#main
{
	background-color:white;
	width:980px;
	margin:0 auto;
	min-height:500px;
	padding:20px;
}

#menu
{
	background-color:darkorange;
}

#menu ul
{
	list-style:none;
	margin:0;
	padding:0;
}

#menu ul li
{
	display:inline-block;
	width:180px;
	text-align:center;
	margin:0;
	padding:10px;
	border-right:1px solid white;
}

#menu ul li a
{
	text-decoration:none;
	color:white;
}

 

splashscreen.css


#splashscreen
{
	z-index:99;
	position:fixed;
	display:block;
	overflow:hidden;
	top:0;
	width:100%;
	height:100%;
	background-color:black;
	margin:0;
	padding:0;
}

#acces-site
{
	text-align:right;
	padding:4px 10px;
	background-color:white;
}

#splashscreen img
{
	width:100%;
}