HTML, effet de transition entre 2 pages

[Fermé]
Signaler
-
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
-
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..

19 réponses

Messages postés
23168
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
18 août 2021
2 257
<a onclick="affiche_overlay_window('./images/load.gif','page2.html');" href="#"><img width="107" height="94" border="0" src="Nouveau dossier/img068.jpg"></a>

ça vient de là ... donc il faut que tu essaies de 'jouer' sur cette fonction ...
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
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..
Shadowbox ?
Je ne ne vois pas bien comment m'en servir ?
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Tout est expliqué sur le site
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 ?
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
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.
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é ?
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
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%
Aie aie aie, ça ressemble à du turbo pascal ça et j'y suis en plein dedans dans mes études..
<SCRIPT language="Javascript">
<!--

function setInterval(opacity('IDdiv', 80, 0, 500))

//-->
</SCRIPT>
</HEAD>
Serait ce un truc de ce type, impossible de voire quoi que ce soit sur la fonction "opacity"
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
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".
<script type="text/javascript"> <!--
var div = document.getElementById('id-div');
var timer = setInterval("augmenterOpacite()", 20);

function augmenterOpacite() {
    div.style.opacity	+= 0.02;
    if(div.style.opacity == 1)
        clearInterval(timer);
}
//--></script> 
Ok, merci bien, enfaite mes études ne sont pas centrés la dessus c'est plus un outils pour utiliser les maths..
Dernière question, où je place mon code ? Dans le HEAD ? dans ma balise overlay ?
Merci beaucoup
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
À placer dans le head :
<script type="text/javascript"> <!--
var div, timer;

function augmenterOpacite() {
    div.style.opacity	+= 0.02;
    if(div.style.opacity == 1)
        clearInterval(timer);
}

window.onload = function() {
    div = document.getElementById('id-div');
};
//--></script>
Et ajoute cette ligne dans ta fonction qui ouvre le pop-up :
timer = setInterval("augmenterOpacite()", 20);
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...
<head>
<script type="text/javascript"> <!--
var div, timer;

function augmenterOpacite() {
div.style.opacity += 0.02;
if(div.style.opacity == 0.75)
clearInterval(timer);
}

window.onload = function() {
div = document.getElementById('id-div');
};
//--></script>
<head>
<script src="overlay.js"></script>
<!--- Partie Css pour la gestion overlay et window!--->
<style type="text/css">


.calque{
opacity:.80;
color: #000;
position: absolute;
visibility : hidden;
padding: 0px;
font-family: Courrier;
align: center;
font-size: 8pt;
background-color: #000000;
opacity : .75;
filter : alpha (opacity=75);
width: 100%;
height : 100%;
top : 0;
left : 0;
setInterval : augmenterOpacite(), 20;
}
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Il y a aussi du Javascript ...
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é !
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Utilise Shadowbox, ça sera plus simple et plus stylé.
Ok mais ça veut dire que je dois tout reprendre et virer mon effet POP UP que j'ai mis en place et tout refaire ? où est-ce juste pour l'opacité ?
Merci en tout cas
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
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.
J'ai mis ce code dans mon head : <link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({

});
</script>

j'ai rajouter dans mon lien :
<a href = "#" rel="shadowbox" OnClick = "affiche_overlay_window('./images/load.gif','page2.html');"><img src="Nouveau dossier/img068.jpg" width="107" height="94" border="0" /></a>

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 !?
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
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).