HTML, effet de transition entre 2 pages

Question

Bonjour, à tous, je cherche à avoir un effet de transition plus jolie, et plus progressif entre les différentes pages, regardez vous même : http://www.liftinn.fr/SS.html : Lorsqu'on clique sur le premier album, un page apparait mais assez brutalement, est-il possible de la faire venir plus progressivement ? 
Merci pour votre aide..

bg62 · Answer

ça vient de là ... donc il faut que tu essaies de 'jouer' sur cette fonction ...

avion-f16 · Answer

https://www.shadowbox-js.com/

warior · Answer

De "jouer" sur cette fonction ?
J'ai essayé d'y appliquer quelque truc que j'ai trouvé mais rien en marche pour cet effet pop up..

warior · Answer

Shadowbox ?
Je ne ne vois pas bien comment m'en servir ?

avion-f16 · Answer

Tout est expliqué sur le site

warior · Answer

Le problème est que je suis obliger d'installer le truc et donc de tout modifier ?
N'est il pas possible de rajouter un code HTML ? J'ai cru comprendre que oui, mais que c'était simplement compatible avec IE ?

avion-f16 · Answer

Le (x)HTML ne fait que contenir des données, ce n'est certainement pas son rôle.
En Javascript c'est possible, en faisant un setInterval qui augmente à chaque fois l'opacité du calque.

warior · Answer

Aie, aie, aie.. Je bloque un peu là avec le Javascript, ça m'a l'air bien compliqué je ne trouve aucun Code setInterval, j'ai compris le principe, qui est que petit à petit ça devient plus opaque mais je vois vraiment pas comment traduire ça en Javascript, ça s'écris sous forme setInterval("commande",temps);
Mais il faut que je crée une commande qui augmente l'opacité ?

avion-f16 · Answer

Oui, tu dois créer une fonction qui augmente l'opacité de x pourcent, que tu appelles toutes les x millisecondes avec setInterval.

Si par exemple tu veux afficher le cadre en une seconde, alors tu peux appeller toutes les 20 millisecondes la fonction qui augmentera l'opacité de 2%

warior · Answer

Aie aie aie, ça ressemble à du turbo pascal ça et j'y suis en plein dedans dans mes études.. Serait ce un truc de ce type, impossible de voire quoi que ce soit sur la fonction "opacity"

avion-f16 · Answer

setInterval est une fonction déjà déclarée, pas besoin de la faire précéder du mot "function". Par contre, à voir ton code, tu dois avoir un prof qui comme beaucoup n'est pas "à jour".

avion-f16 · Answer

À placer dans le head :Et ajoute cette ligne dans ta fonction qui ouvre le pop-up :timer = setInterval("augmenterOpacite()", 20);

warior · Answer

Le soucy c'est que mon pop up est programmé en CSS, donc je ne vois pas ou copier la 2nd ligne... Voila mon code...

avion-f16 · Answer

Il y a aussi du Javascript ...

warior · Answer

Ok, mais je ne vois pas qu'elle syntaxe utiliser du coup et dans qu'elle sous partie je dois le mettre..
Je crois avoir tout essayé !

avion-f16 · Answer

Utilise Shadowbox, ça sera plus simple et plus stylé.

avion-f16 · Answer

Le système est déjà complet, ça n'a rien à voir avec ton système.
Il te suffira d'insérer un fichier Javascript, de mettre quelques lignes très courtes de JS et un peut modifier ton (x)HTML.
Tout est très bien expliqué sur le site.

warior · Answer

J'ai mis ce code dans mon head : j'ai rajouter dans mon lien :

Et rien ne ce passe j'ai beau essayer de mettre des options bien que je n'en trouve aucune dont la description me semble adapté mais, il n'y a aucun changement !?

avion-f16 · Answer

Tu peux déjà retirer le onclick et préciser la page que tu veux charger dans le href.
Dans l'init, tu dois préciser le "driver" que tu veux utiliser.
Et quand tu télécharges Shadowbox, pense à cocher la case "External sites and pages" (iframe) ou "Inline and/or dynamic HTML" (AJAX).

HTML, effet de transition entre 2 pages

19 réponses

Votre réponse

Discussions similaires