Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3056 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Site deroulant à la vertical sans utiliser le scroll

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Site deroulant à la vertical sans utiliser le scroll

n°1581841
melanie41
Posté le 03-07-2007 à 12:15:23  profilanswer
 

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:

mood
Publicité
Posté le 03-07-2007 à 12:15:23  profilanswer
 

n°1581868
AlphaZone
Posté le 03-07-2007 à 12:53:29  profilanswer
 

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."
n°1581872
melanie41
Posté le 03-07-2007 à 13:03:13  profilanswer
 

roo merci beaucoup !
je vais m'y pencher :)
 
encore merci ^^

n°1581879
AlphaZone
Posté le 03-07-2007 à 13:25:33  profilanswer
 

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


---------------
"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."
n°1582102
melanie41
Posté le 03-07-2007 à 20:02:33  profilanswer
 

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 ?:)

n°1582299
AlphaZone
Posté le 04-07-2007 à 11:07:45  profilanswer
 

Par le commencement ? lol ok, je sors...
 
Tu mets ton JavaScript dans un fichier ayant pour extension .js
 
scroll.js

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


 
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 :
  1. <html>
  2. <head>
  3.  <title>Test</title>
  4.  <script src="scroll.js" type="text/javascript"></script>
  5.  <link id="screen-css" href="style.css" rel="stylesheet" rev="stylesheet" type="text/css" media="screen" />
  6. </head>
  7. <body>
  8.  <div id="demo-bar">
  9.   <a href="#" id="link1" name="link1">Site 1</a>
  10.  </div>
  11.  <div id="demo-wrapper">
  12.   <div id="demo-inner">
  13.    <div id="content1" class="scrolling-content">
  14.     <h1>
  15.      The Blue Sky
  16.     </h1>
  17.    </div>
  18.   </div>
  19.  </div>
  20. </body>
  21. </html>


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

Code :
  1. $('link1').addEvent('click', function(event) {
  2. event = new Event(event).stop();
  3. scroll.toElement('content1');
  4. });


 
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."
n°1582633
melanie41
Posté le 04-07-2007 à 22:23:59  profilanswer
 

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

n°1582843
AlphaZone
Posté le 05-07-2007 à 15:16:28  profilanswer
 

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."
n°1679725
Sarah56
Posté le 31-01-2008 à 14:44:06  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Site deroulant à la vertical sans utiliser le scroll

 

Sujets relatifs
Recherche testeurs pour mon site web[Xiti] Téléchargement qui n'en finit pas sur le site csq = pas d'image
site à accès limité.Site pour uploader une animation flash
Webmail pour site de rencontremenu vertical javascript que l'on peut cacher
Ouvrir un document sans utiliser IESauvegarder des paramètres et les utiliser dans un code Fortran
Mettre un site en page de démarrageRecherche "style" de forum...en php pour site web
Plus de sujets relatifs à : Site deroulant à la vertical sans utiliser le scroll


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR