Ancres, scolling : rendre la navigation fluide
Résolu
Roxy
-
ThEBiShOp Messages postés 9307 Statut Contributeur -
ThEBiShOp Messages postés 9307 Statut Contributeur -
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
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
Salut,
tu trouveras probablement ce que tu veux là :
https://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide
tu trouveras probablement ce que tu veux là :
https://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide
C'est exactement ce que je cherchais ! (le site est très intéressant, tu fais mon bonheur !)
Grand merci
Grand merci
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 :
Mes ancre fonctionnent, mais la transition est brut
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
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 ...
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 ...