Effet de transition d'une page à l'autre.

Par Supa polo, il y a 10 ans

Javascript

Bonjour à tous ,

J'aimerais implementer sur mon site internet un systeme de transition d'une page à l'autre , afin que se produise un effet lorsqu'on on change de page.

Seulement , je n'est pas encore toutes les connaissances en javascript pour réaliser le script , j'ai cherché sur le web , et j'ai trouvé ce genre de framework qui semble fiable , mais je ne comprend pas comment m'en servir: http://git.blivesta.com/animsition/fade-left-sm/.

Si quelqu'un aurait le temps de bien vouloir m'expliquer ce serait le top !!.

Merci d'avance ,

13 réponses

betaWeb, il y a 10 ans

Salut,

Le script JS n'est vraiment pas compliqué à faire, il faut ajouter (ou enlever c'est selon les goûts) une classe à ton conteneur un petit peu après la fin du chargement de page, puis gérer l'animation via le CSS.

JS:

document.addEventListener('DOMContentLoaded', function() { document.querySelector('body').classList.add('is-ready'); }, false);

CSS:

body{ opacity: 0; transform: translateX(-200px); } body.is-ready{ opacity: 1; transform: translateX(0); transition-duration: 1s; }
Supa polo, il y a 10 ans

Salut !

Merci pour ton aide , mais je ne comprend pas un truc , La transition ne se fait pas à chaque coup ?

Merci d'avance,

betaWeb, il y a 10 ans

Salut,

Si, à l'affichage de la page, lorsque le DOM est prêt.

Supa polo, il y a 10 ans

C'est bizarre parce que j'ai l'impression que la transition se fait aleatoirement, le temps de mise en place du DOM n'est jamais le meme.
J'ai également une autre question le script , je le met à la fin de chaque page html ? parce que la transition ne fait que pour une page alors que j'ai mit le script sur toute.

betaWeb, il y a 10 ans

Quel est ta structure de code ? MVC ? Procédural ?
Quoi qu'il en soit mets le script en bas de page et en dernier. Et rajoute ceci:

<script type="text/javascript"> (function() { document.addEventListener('DOMContentLoaded', function() { document.querySelector('body').classList.add('is-ready'); }, false); })(); </script>
Supa polo, il y a 10 ans

C'est vraiment bizarre , cela marche toujours pas , en revanche comment puis je savoir ma strucuture de code ? ;)

betaWeb, il y a 10 ans

Beh ton site est codé comment ? PHP ? Tu as des controllers, des models et des views ?

Supa polo, il y a 10 ans

Ha ok ^^' , j'ai mit uniquement du HTML et CSS , il n'y pas de chose compliquer, pas de controllers , ni de models ni de views...

betaWeb, il y a 10 ans

Beh il te faut mettre le script dans chaque page HTML

Supa polo, il y a 10 ans

Damn , sur firefox cela marche nickel mais sur chrome ca chie

betaWeb, il y a 10 ans

Firefox est relou avec le cache, fais un CTRL+SHIFT+R.

Supa polo, il y a 10 ans

J'ai regler IE , mais chrome ca bug toujours , mais c'est pas grv , ca modifie pas le site

betaWeb, il y a 10 ans

C'est pas normal, j'ai un code similaire sur un de mes sites et il fonctionne sur tous les navigateurs, Chrome compris.