Transition en douceur entre les pages html avec un chargement de l'image de l'animation
C'est excatly ce que je suis à la recherche de: http://hoverstud.io
. Je ne suis PAS à la recherche de quelque chose comme this-> http://bit.ly/11jdunO , qui a trop de problèmes et de bugs.
Quelqu'un peut s'il vous plaît aidez-moi à trouver un tutoriel ou des liens?
Ce langage et de l'environnement que vous utilisez?
De simples Pages d'aide de HTML et de CSS
Vous pourriez fade out de votre
Yup. Si vous avez visité le deuxième lien que j'ai mentionné, Il a presque le même code que vous avez donné et a quelques erreurs comme le scintillement une fois et le chargement de plusieurs fois etc. J'ai vraiment besoin de quelque chose comme l'exemple de site que j'avais donné. J'ai vu des sites à l'aide de #! techniques dans l'url. Je ne sais pas pourquoi ils l'utilisent. Mais presque tous ces sites utilisent assez ajax genre de transitions.
Aucune idée de la façon dont la première page est-il? Id aiment vraiment de savoir
De simples Pages d'aide de HTML et de CSS
Vous pourriez fade out de votre
body
lorsque vous cliquez sur un lien, puis rediriger, puis fondu dans le body
de la nouvelle page. Est-ce que vous voulez ?Yup. Si vous avez visité le deuxième lien que j'ai mentionné, Il a presque le même code que vous avez donné et a quelques erreurs comme le scintillement une fois et le chargement de plusieurs fois etc. J'ai vraiment besoin de quelque chose comme l'exemple de site que j'avais donné. J'ai vu des sites à l'aide de #! techniques dans l'url. Je ne sais pas pourquoi ils l'utilisent. Mais presque tous ces sites utilisent assez ajax genre de transitions.
Aucune idée de la façon dont la première page est-il? Id aiment vraiment de savoir
OriginalL'auteur Rahul | 2013-06-06
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas sûr de ce que vous voulez exactement, mais vous pouvez utiliser ce code :
Il va disparaître de la page entière. Si vous souhaitez diminuer une partie seulement de votre page, changer
body
par tout ce que vous voulez.OriginalL'auteur Brewal
Je voudrais utiliser un peu plus récente et la plus propre de ce type d'outils.
Aujourd'hui, vous pouvez utiliser les transitions CSS pour ce faire.
Voici un exemple très simple:
Je suis en supposant ici que la transition entre les pages est un rechargement complet de la page, de sorte que le
container-loaded
de la classe est allé une fois la page rechargée.Mais il devrait être presque trivial à mettre en œuvre ce pour une page web apps à l'aide de n'importe quel cadre, Turbolinks ou quelque chose comme ça.
Choses à noter:
document.onload
au lieu de$(document).ready()
.document.querySelector
et classLists sont disponibles pour vous.Pourriez vous s'il vous plaît coller de travail exemple. J'ai essayé: wklej.org/id/1635681 mais rien ne se passe quand je vais sur un autre site.
Si vous pardonnerez mon trop long retard, voici un travail de démo: jsfiddle.net/n0b7w5bq
Bravo à l'ajout de la classe css pour éviter maladroit FOUT
OriginalL'auteur GeReV
J'ai construit quelque chose comme ça.
Premier lieu, l' #preloader sur le code HTML sur une div comme ceci
Si vous le souhaitez, vous pouvez placer un gif à l'intérieur.
Puis le programme d'installation un peu de CSS:
Maintenant faire un script comme ceci:
Et vous avez terminé 🙂
La première partie est de faire de votre preloader apparaissent lorsque la fenêtre est en cours de chargement, puis fadeOut.
La deuxième est de se lier à un clic sur le archor à fadeIn le preloader et le rediriger vers le href de la archor.
OriginalL'auteur Nuno Costa