Site deroulant à la vertical sans utiliser le scroll

Marsh Posté le 03-07-2007 à 12:15:23

Bonjour tout le monde !

Voilà, j'aimerais realiser mon site avec ce systeme :
http://dannyblackman.com/

Je ne sais pas si c'est du css...

Est ce que quelqu'un aurait deja vu un code de ce genre ?
ce serait genial de m'eclairer :bounce:

merci à l'avance de votre réponse :hello:

Reply

Marsh Posté le 03-07-2007 à 12:15:23

Reply

Marsh Posté le 03-07-2007 à 12:53:29

Salut,

Le site utilise du JavaScript pour ce genre d'effet. D'ailleur, c'est du javascript téléchargé ici : http://www.mootools.net/

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."

Reply

Marsh Posté le 03-07-2007 à 13:03:13

roo merci beaucoup !
je vais m'y pencher

encore merci ^^

Reply

Marsh Posté le 03-07-2007 à 13:25:33

Oh bah j't'enpris, je n'ai pas de mérite mais si t'insiste...

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."

Reply

Marsh Posté le 03-07-2007 à 20:02:33

lol je reviens....
en fait j'ai un peu chercher et je tombe sur ça :
http://demos.mootools.net/Fx.Scroll

ok j'ai les codes js, html et css...mais une fois que j'ai crée mon fond qui va servir à naviguer dessus, je ne sais pas par où commencer.
je ne connais que le html donc je suis carrement perdu

tu saurais pas par où commencer par hasard ?

Reply

Marsh Posté le 04-07-2007 à 11:07:45

Par le commencement ? lol ok, je sors...

Tu mets ton JavaScript dans un fichier ayant pour extension .js

scroll.js

Code :

var scroll = new Fx.Scroll('demo-wrapper', {
wait: false,
duration: 2500,
offset: {'x': -200, 'y': -50},
transition: Fx.Transitions.Quad.easeInOut
});

Dans ton code HTML, tu va avoir un lien et un conteneur. Ce lien t'amèneras à ton conteneur. Sans oublié d'include ton code JS et feuille de style CSS.

Voici un exemple :

Code :

<html>
<head>
<title>Test</title>
<script src="scroll.js" type="text/javascript"></script>
<link id="screen-css" href="style.css" rel="stylesheet" rev="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="demo-bar">
<a href="#" id="link1" name="link1">Site 1</a>
</div>
<div id="demo-wrapper">
<div id="demo-inner">
<div id="content1" class="scrolling-content">
<h1>
The Blue Sky
</h1>
</div>
</div>
</div>
</body>
</html>

Ensuite, dans ton fichier JavaScript, tu rajoute ce code :

Code :

$('link1').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content1');
});

Tu remarqueras qu'il a content1 et link1 dans ce code. Ce qui correspond aux IDs de ton lien et de ton conteneur.

Tu auras autant de code que de lien et de conteneur que tu veux mettre en place.

Je n'ai pas testé mais, je suppose, que c'est comme ca qu'il faut procéder.

EDIT : N'oublie pas de télécharger la librairie Fx.Scroll : http://mootools.net/download
EDIT 2 : N'oublie pas de consulter la documentation : http://docs.mootools.net/

Message édité par AlphaZone le 04-07-2007 à 11:11:36

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."

Reply

Marsh Posté le 04-07-2007 à 22:23:59

un enorme merci !
je vais tester tout ça, et bien sur je pense que je reviendrai vers toi lol

je vais deja essayer de finir toute ma page et la monter sous dreamweaver

merciiiiii

Reply

Marsh Posté le 05-07-2007 à 15:16:28

Si tu veux un bon conseil oublie Dreamweaver. Pour un logiciel dit "pro", il produit trop de code inutile (moins que Words, FrontPage et compagnie )

Lance toi dans la programmation manuel. Tu seras maître(sse) de ton code et donc plus optimisé

Voila voila.

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."

Reply

Marsh Posté le 31-01-2008 à 14:44:06

Bonjour,
voila j'ai essayé de mettre ces petits bouts de code dans mon code déjà existant, mais cela me mets que "Fx is not defined". j'ai vraiment suivi ce qu'il y avait d'écrit. je fais mon site avec dreamweaver. Si quelqu'un à déjà eu ce problème, merci de votre aide.
Merci
Sarah56.

Reply

Site deroulant à la vertical sans utiliser le scroll

Sujets relatifs:

Leave a Replay