Sujet Précédent Sujet Suivant

Ancres, scolling : rendre la navigation fluide

Résolu/Fermé
Roxy - 19 sept. 2013 à 12:42
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 19 sept. 2013 à 14:48
Bonjour,

Aujourd'hui je m'attaques à la partie intéressante (et qui m'est totalement inconnue) d'un projet : rendre la navigation d'un site "one page" fluide, basée sur des ancres et des transitions progressives. Le hic : je ne code quasi pas (j'suis en 1ere année de DUT Metiers du Multimédia et de l'Internet), mais je comprends les codes, j'suis généralement apte à les modifier.
Mon idée est de faire une site sur 1 page, avec une side bar à gauche qui présenterai un menu. Via ce menu, on pourrait naviguer dans les différentes catégories du site, et la partie principale (full page - left side bar) déroulerai fluidement. J'me doute que pour ceci, il faut appliquer du javascript, sauf si css3 et/ou html5 ont fait des progrès...

Pourquoi j'ouvre ce poste ? Pour vous demander votre aide, si vous avez des conseils et des idées à me donner. J'vous cache pas que si quelqu'un à un tuto complet et compréhensible je suis trèèèès intéressé ! J'suis totalement perdu mais j'ai pas envie de baisser les bras :)


Bien bonne journée à vous
Roxanne

4 réponses

Réponse 1 / 4
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
19 sept. 2013 à 12:44
Salut,

tu trouveras probablement ce que tu veux là :
https://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide
0
Réponse 2 / 4
Roxy
19 sept. 2013 à 13:36
C'est exactement ce que je cherchais ! (le site est très intéressant, tu fais mon bonheur !)
Grand merci
0
Réponse 3 / 4
Roxy
19 sept. 2013 à 14:08
J'ai appliqué ce que le mec présente, mais la transition ne s'applique pas. Quelqu'un pourrait-il m'aider ? (j'suis chiante hein)
Ma manip :
J'ai créé un fichier "scroll.js", je l'ai placé dans mon répertoir "js". Dans ma page .html, j'ai (bêtement) collé une ligne qu'il indique : 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Pour finir, j'ai fait un appel à mon script via : 
<script src="js/scroll.js"></script>

Mes ancre fonctionnent, mais la transition est brut
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
19 sept. 2013 à 14:11
tu es sur quel navigateur ? Tu as quelque chose dans la console javascript ?

sur chrome : ctrl+shift+i
sur firefox, il faut installer firebug
0
Réponse 4 / 4
Roxy
19 sept. 2013 à 14:39
Bon j'me parle à moi même, mais j'y suis arrivé! Les transitions sont toutes belles !
Maintenant surgit un problème lié au css : j'ai une sidebar (menu), et afin de rendre le site un tant soit peu égonomique je souhaiterai la rendre fixe. Pour cela j'ai essayé "position: absolute" et "background-attachment:fixed;", mais rien n'y fait ...
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
19 sept. 2013 à 14:48
Essaie avec position: fixed au lieu d'absolute, n'oublie pas de mettre un z-index un peu élevé pour pas qu'il se retrouve derrière
0