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."
)