[JavaScript] Slide page entière javascript

Bonjour,

Je cherchai un moyen pour faire un site dans lequel on pourrait passer d'une page à l'autre en slide sans changer d'url. En cherchant sur internet j'ai trouvé un script très bien qui permettait de faire ça en utilisant des lien hypertextes et des balises.

Je trouvais les balise pas très pratiques car ça change le hash et j'en avais besoin pour autre chose. Alors j'ai modifié le script pour avoir le même effet mais en utilisant que les ID et classes des pages.

Voici le code:

HTML

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
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SLIDE</title>
	<link href="css/Slide_page.css" type="text/css" rel="stylesheet">
</head>
 
<body>
	<div class="container" id="container">
		<div id="pages">
			<div id="page1">
				<div id="_1" class="SousPage"></div>
			</div>
			<div id="page2">
				<div id="_2" class="SousPage"></div>
			</div>
			<div id="page3">
				<div id="_3" class="SousPage"></div>
			</div>
			<div id="page4">
				<div id="_4" class="SousPage"></div>
			</div>
			<div id="page5">
				<div id="_5" class="SousPage"></div>
			</div>
			<div id="page6">
				<div id="_6" class="SousPage"></div>
			</div>
			<div id="page7">
				<div id="_7" class="SousPage"></div>
			</div>
			<div id="page8">
				<div id="_8" class="SousPage"></div>
			</div>
			<div id="page9">
				<div id="_9" class="SousPage"></div>
			</div>
			<div id="page10">
				<div id="_10" class="SousPage"></div>
			</div>
			<div id="page11">
				<div id="_11" class="SousPage"></div>
			</div>
			<div id="page12">
				<div id="_12" class="SousPage"></div>
			</div>
		</div>
 
		<div id="nav">
			<div id="snav">
				<div id="go1" class="nN"></div>
				<div id="go2" class="nN"></div>
				<div id="go3" class="nN"></div>
				<div id="go4" class="nN"></div>
				<div id="go5" class="nN"></div>
				<div id="go6" class="nN"></div>
				<div id="go7" class="nN"></div>
				<div id="go8" class="nN"></div>
				<div id="go9" class="nN"></div>
				<div id="go10" class="nN"></div>
				<div id="go11" class="nN"></div>
				<div id="go12" class="nN"></div>
			</div>
		</div>
	</div>
</body>

JAVASCRIPT

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
80
81
82
83
84
85
window.onload = function() {
 
var Q={
	timers:[null,null],
	ID:function (t) {return document.getElementById(t);},
	b:function (b,c) {return b.childNodes[c];},
	d:function (b,c) {b.className=c;},
	elems:{pages:"pages",page:"page",container:"container"},
	ListPage:[],
	X:function (id) {
		var V={
			Id:this.ID(id),
			xPos:-this.ID(id).offsetLeft,
			yPos:-this.ID(id).offsetTop
		}
		return V;},
	lastVisited:1
}
 
	function ResizeThis(q,timer){
		clearTimeout(timer);
		timer=setTimeout(function(){SlideInit(q)},200);
	}
 
function SlideInit(q) {
	var i=0;var n=1;
	while (q.b(q.ID(q.elems.pages),i)) {(q.b(q.ID(q.elems.pages),i).id!=undefined) ? (q.b(q.ID(q.elems.pages),i).id.search(q.elems.page)==0) ? n++:false:false;i++;}
	for (var i=1;i<n;i++) {
		if (!q.ListPage[i])
			q.ListPage[i]=q.X(q.elems.page+i);
	};
	WindowOnResize(q,q.timers[0]);
}
 
function moveTo(q,N,dur,timer) {
	if (N<=12) {for (var i=1;i<=12;i++) {q.d(q.ID("go"+i),"nN");};q.d(q.ID("go"+N),"nHover");}
	var T0=new Date()*1;
	var fromX=q.ID(q.elems.pages).offsetLeft;
	var fromY=q.ID(q.elems.pages).offsetTop;
	var iXPos=q.ListPage[N].xPos-fromX;
	var iYPos=q.ListPage[N].yPos-fromY;
	q.lastVisited=N;
	if (!timer)
	timer=window.setInterval(function () {
		var iCurTime=(new Date()*1)-T0;
		if (iCurTime<dur) {
			var iCur=Math.cos(Math.PI*(iCurTime/dur))-1;
			q.ID(q.elems.pages).style.left=Math.round(-iXPos*.5*iCur+fromX)+"px";
			q.ID(q.elems.pages).style.top=Math.round(-iYPos*.5*iCur+fromY)+"px";
		}
		else {
			q.ID(q.elems.pages).style.left=Math.round(fromX+iXPos)+"px";
			q.ID(q.elems.pages).style.top=Math.round(fromY+iYPos)+"px";
			window.clearInterval(timer);
			timer=false;
		}
	},24);
}
 
function WindowOnResize(q,timer) {
	var iCurW=q.ID(q.elems.container).offsetWidth;
	var iCurH=q.ID(q.elems.container).offsetHeight;
	for (var i in q.ListPage) {
		var o=q.ListPage[i];
		var iNewX=Math.round(o.Id.offsetLeft*iCurW/o.Id.offsetWidth);
		var iNewY=Math.round(o.Id.offsetTop*iCurH/o.Id.offsetHeight);
		o.Id.style.left=iNewX+"px";
		o.Id.style.top=iNewY+"px";
		o.Id.style.width=iCurW+"px";
		o.Id.style.height=iCurH+"px";
		o.xPos=-iNewX;
		o.yPos=-iNewY;
	}
	moveTo(q,q.lastVisited,200,timer)
}
 
SlideInit(Q);
window.onresize=function() {ResizeThis(Q,0,Q.timers[1]);};
 
	for (var i=1;i<13;i++) {
		Q.ID("go"+i).value=i;
		Q.ID("go"+i).onclick=function() {moveTo(Q,this.value,500,Q.timers[0]);}
	}
 
}

CSS

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
.container {
	position: absolute;
	left:0px;
	top:0px;
	background:url(../images/4.jpg);
	overflow:hidden;
	width:100%;
	height:100%;
	min-width:636px;
	max-width:2560px;
	min-height:750px;
	max-height:1600px;
	background-size:cover !important;
	-webkit-background-size: cover !important;
	-o-background-size: cover !important;
}
#pages {
	left:0px;
	position:absolute;
	top:0px;
}
#pages > div {
	height:1100px;
	width:1700px;
	position:absolute;
}
.SousPage {
	margin:auto;
	width:80%;
	height:80%;
	min-width:636px;
	max-width:2560px;
	min-height:573px;
	max-height:1600px;
	border:1px solid white;
	margin-top:100px;
}
#_1 {background-color:#4876FF;}
#_2 {background-color:#708090;}
#_3 {background-color:#6A5ACD;}
#_4 {background-color:#008B45;}
#_5 {background-color:#808069;}
#_6 {background-color:#FFB90F;}
#_7 {background-color:#8B5A2B;}
#_8 {background-color:#FF4500;}
#_9 {background-color:#8E388E;}
#_10 {background-color:#B7B7B7;}
#_11 {background-color:#00BFFF;}
#_12 {background-color:#CD3278;}
 
#page1 {	left:0px;top:0px;}
#page2 {left:1800px;top:0px;}
#page3 {left:3600px;top:0px;}
#page4 {left:0px;top:1300px;}
#page5 {left:1800px;top:1300px;}
#page6 {left:3600px;top:1300px;}
#page7 {left:0px;top:2600px;}
#page8 {left:1800px;top:2600px;}
#page9 {left:3600px;top:2600px;}
#page10 {left:0px;top:3900px;}
#page11 {left:1800px;top:3900px;}
#page12 {left:3600px;top:3900px;}
 
 
#nav {
	position:fixed;
	width:100%;
	top:20%;
	left:20%;
	z-index:80;
}
#snav {
	display:inline-block;
	width:100px;
	margin-left:5px;
	float:left;
}
#snav div {
	float:left;
	width:30px;
	height:30px;
	margin:3px 3px 0px 0px;
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	transition:all .2s linear;
}
#snav div:hover {
	cursor:pointer;
	background-color:red;
}
.nHover {background-color:blue;}
.nN {background-color:black;}

Dans le CSS, l'image background du "container" est l'image de fond qui sera fixe quelle que soit la position

Bien sur on peut disposer les pages autrement que dans cet exemple en modifiant les positions left et top du CSS

On peut aussi rajouter des pages à la volée.

Il reste juste à remplir les page avec du contenu, n'hésitez pas à me dire si vous trouvez des erreurs ou pensez qu'on peut faire plus simple !