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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JCVD POWA !!!! XD XD XD</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('body,#content').css({'overflow':'hidden'});
$('#nav a').slice(1,5).bind('click',function(e){
e.preventDefault();
$('#nav a').removeClass('current');
$(this).addClass('current');
var cible = $(this).attr('href');
$('html, body').stop().animate({
scrollLeft: $(cible).offset().left,
scrollTop: $(cible).offset().top
}, 500);
});
$('#nav a:first').bind('click',function(e){
e.preventDefault();
$('#nav a').each(function(i){
if($(this).hasClass('current')) positionCurrent = i;
});
if(positionCurrent != 1){
$('#nav a').eq(positionCurrent - 1).trigger('click');
}
});
$('#nav a:last').bind('click',function(e){
e.preventDefault();
$('#nav a').each(function(i){
if($(this).hasClass('current')) positionCurrent = i;
});
if(positionCurrent != 4){
$('#nav a').eq(positionCurrent + 1).trigger('click');
}
});
});
</script>
<style type="text/css">
body,#content{width:3000px;}
#nav{position:fixed;top:0;left:0;}
#nav li{display:inline-block;}
#nav a{display:block;width:15px;height:15px;margin:0 10px;padding:5px;text-decoration:none;background-color:black;color:white;border:1px solid black;}
#nav a:hover{background-color:white;color:black;}
#content{margin:40px 0 0 0;}
.article{width:480px;float:left;margin:0 10px;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#"><</a></li>
<li><a href="#uneAncre" class="current">1</a></li>
<li><a href="#uneAutreAncre">2</a></li>
<li><a href="#encoreUneAncre">3</a></li>
<li><a href="#etEncoreUneAncre">4</a></li>
<li><a href="#">></a></li>
</ul>
<div id="content">
<div id="uneAncre" class="article">
<p>You see, premièrement, il y a de bonnes règles, de bonnes rules et c'est une sensation réelle qui se produit si on veut ! Et là, vraiment, j'essaie de tout coeur de donner la plus belle réponse de la terre ! </p>
<p>Quand tu fais le calcul, si vraiment tu veux te rappeler des souvenirs de ton perroquet, en vérité, la vérité, il n'y a pas de vérité parce que spirituellement, on est tous ensemble, ok ? Et j'ai toujours grandi parmi les chiens. </p>
<p>Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, tu vois au passage qu'il n'y a rien de concret car le cycle du cosmos dans la vie... c'est une grande roue et finalement tout refaire depuis le début. Mais ça, c'est uniquement lié au spirit. </p>
</div>
<div id="uneAutreAncre" class="article">
<p>Tu comprends, je sais que, grâce à ma propre vérité entre penser et dire, il y a un monde de différence car l'aboutissement de l'instinct, c'est l'amour ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Ça sounds good, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on vit dans une réalité qu'on a créée et que j'appelle illusion et je ne cherche pas ici à mettre un point ! C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>Si je t'emmerde, tu me le dis, je ne suis pas un simple danseur car c'est juste une question d'awareness et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit. </p>
</div>
<div id="encoreUneAncre" class="article">
<p>Ça sounds good, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on vit dans une réalité qu'on a créée et que j'appelle illusion et je ne cherche pas ici à mettre un point ! C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>Si je t'emmerde, tu me le dis, je ne suis pas un simple danseur car c'est juste une question d'awareness et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu vois, après il faut s'intégrer tout ça dans les environnements et il faut se recréer... pour recréer... a better you et c'est très, très beau d'avoir son propre moi-même ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu comprends, là on voit qu'on a beaucoup à travailler sur nous-mêmes car entre penser et dire, il y a un monde de différence et parfois c'est bon parfois c'est pas bon. C'est pour ça que j'ai fait des films avec des replicants. </p>
</div>
<div id="etEncoreUneAncre" class="article">
<p>Tu vois, après il faut s'intégrer tout ça dans les environnements et il faut se recréer... pour recréer... a better you et c'est très, très beau d'avoir son propre moi-même ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu comprends, là on voit qu'on a beaucoup à travailler sur nous-mêmes car entre penser et dire, il y a un monde de différence et parfois c'est bon parfois c'est pas bon. C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>You see, premièrement, entre penser et dire, il y a un monde de différence et je ne cherche pas ici à mettre un point ! Il y a un an, je t'aurais parlé de mes muscles. </p>
</div>
</div>
</body>
</html> |
Comment faire un site à lecture horizontale ?
Répondre avec citation
pardon !!! :/
(excepté ce que tu m'as appris précédemment sur comment "ralentir une ancre").
Mais je tente de m'y mettre... mais pas facile).
Envoyé par ryan
Mais j'ai gardé toutes mes pages de test car nul doute que j'aurais besoin un jour de ce que vous m'avez appris (ou plutôt donné 
Merci pour ton lien (que je vais lire et relire) et tes conseils 
mais bien que mon problème soit résolu, que faut-il rajouter au code pour que la flèche droite reste présente sur le dernier div afin de revenir au premier div ?
Bah j'ai continué la discussion comme je l'ai fait avec vous 
Partager