Petit Splash Screen avec une webApp

Bonjour,

Je cherche à faire un splashScreen sur ma webApp.
Pas de soucis, j'ai trouvé des exemples avec mon amis Google.

Mon soucis est que le footer de ma page reste présent pendant le SplashScreen, c'est pas top ....
Une idée de comment l'enlever durant le splashScreen et le retrouver sur la page suivant bien évidement en bas de page et en mode "Fixed" ?

Si-dessous mon HTML et ci-joint le fichier .js si vous souhaitez faire des tests (il suffis juste de rajouter des IMG au hazard pour compléter ...)

Une petite idée ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>  
<html lang="fr">  
	<head>  
		<meta charset="utf-8">
		<!-- Meta -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>TITRE</title>
 
		<!-- Link -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 
		<!-- Scripts -->
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 
		<title>Réaliser un Splachscreen à la façon Apple : HTML, CSS, JS</title>  
		<script src="jquery.splashscreen.js"></script>
		<script>
                        $(document).ready(function(){
                                $('#demoImg').splashScreen({textLayers : [
                                        'images/page2.png',
                                        'images/page3.png'
                        ]});});
                </script>
 
		<style type="text/css"> 
                        #splashScreen{
                                position:absolute;
                                top:0;
                                left:0;
                                height:100%;
                                width:100%;
                                background-color:#6c3306;
                                background-repeat:no-repeat;
                                text-align:center;
                        }
 
                        #demoImg{
                                background:url('images/page1.png');
                                text-align:center;
                        }
                        
                </style>
	</head> 
 
	<body>  
		<div id="demoImg"></div>
 
		<!-- /PAGE -- HOME -->
		<div data-role="page" id="Accueil">
			<!-- Header -->
			<div data-role="header" data-theme="a" >
			 	<h1>Titre</h1>
			</div>
 
			<!-- Content -->
			<div data-role="content">
			  	<div data-role="main" class="ui-content" data-theme="a" data-content-theme="a">
				   	<ul data-role="listview">
				      	<li><a href="#">Page1</a></li>
				      	<li><a href="#">Page2</a></li>
				      	<li><a href="#">Page3</a></li>
			    	</ul>
			  	</div>
			</div>
 
			<!-- Footer -->
			<div data-role="footer"  data-theme="a" data-position="fixed" data-id="foot">
			  <div data-role="navbar">
			    <ul>
			      <li><a href="#Page1" data-role="button">Page1</a></li>
			      <li><a href="#Page2" data-role="button">Page2</a></li>
			    </ul>
			  </div>
			</div>
		</div>
	</body>  
</html>

Pièce jointe 168666