HTML, effet de transition entre 2 pages

Html

warior -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention - 15 mars 2010 à 22:26

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..

Répondre (19)

A voir également:

Transition entre deux pages html
Nombre de jours entre deux dates excel - Guide
Editeur html - Télécharger - HTML
Deux ecran pc - Guide
Itinéraire google map entre deux adresses - Guide
Comment faire deux colonnes sur word - Guide

19 réponses

Réponse 1 / 19

bg62 Messages postés 23731 Date d'inscription Statut Modérateur Dernière intervention 2 409

<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 ...

Réponse 2 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

Réponse 3 / 19

warior

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..

Réponse 4 / 19

warior

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Tout est expliqué sur le site

Réponse 6 / 19

warior

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 ?

Réponse 7 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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.

Réponse 8 / 19

warior

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é ?

Réponse 9 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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%

Réponse 10 / 19

warior

Aie aie aie, ça ressemble à du turbo pascal ça et j'y suis en plein dedans dans mes études..
<SCRIPT language="Javascript">

</SCRIPT>
</HEAD>
Serait ce un truc de ce type, impossible de voire quoi que ce soit sur la fonction "opacity"

Réponse 11 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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>

warior

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

Réponse 12 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

À 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);

Réponse 13 / 19

warior

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"> </script>
<head>
<script src="overlay.js"></script>

<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;
}

Réponse 14 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Il y a aussi du Javascript ...

Réponse 15 / 19

warior

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é !

Réponse 16 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

warior

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

Réponse 17 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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.

Réponse 18 / 19

warior

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 !?

Réponse 19 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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).

Répondre Posez votre question

Votre réponse

Discussions similaires

créer une transition entre pages html

ickyknox -
bg62 -

8 réponses

inclure un fichier php dans une page html

doudoupe -
Melek -

7 réponses

Lien vers une ancre depuis une autre page

Marion -
avion-f16 -

1 réponse

appel d'un fichier css à partir de html

nisa83 -
titou38 -

8 réponses

HTML : Ouvrir une page sur la page actuelle

Andwea -
LelLex -

6 réponses

Hébergement d'une seule page HTML

Kooo7 -
nettlebay -

5 réponses

Devenez membre en quelques clics

Connectez-vous simplement avec ceux qui partagent vos intérêts
Suivez vos discussions facilement et obtenez plus de réponses
Mettez en avant votre expertise et aidez les autres membres
Profitez de nombreuses fonctionnalités supplémentaires en vous inscrivant

S'inscrire