Les transitions de pages Web

Exemple de syntaxe

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">

Paramètres communs

Nous pouvons utiliser différents paramètres qui vont déterminer le type de transition que nous désirons, par exemple à l'aide de blendTrans ou revealTrans. Certains paramètres sont communs aux deux types d'effets de transistions, comme le moment de l'effet :

• Page-enter : pour une transition à l'ouverture de la page.
• Page-exit : pour une transition à la fermeture de la page.

blendTrans

blendTrans permet une transition d'un élément vers un autre. Le plus souvent associé à un script.

Par exemple, un script qui produit un effet lors d'un click sur un élément de la page.

blendTrans s'applique aux éléments suivants :

• body
• div
• span
• input
• button
• textarea
• marquee

revealTrans

<meta http-equiv="Page-Enter" content="revealtrans(duration=4.0, transition=0)">
<meta http-equiv="Page-Exit" content="revealtrans(duration=4.0, transition=0)">

revealTrans s'applique aux éléments suivants :

• body
• div
• span
• input
• button
• textarea
• marquee

Paramètres :

• Duration : indique que la durée de la transition en secondes.
• Transition : désigne l'effet de transition.

Transitions possibles avec revealTrans

#	Effet	Nom anglais	Implémentation alternative
#	Effet	Nom anglais	Implémentation alternative
0	Carré de l'intérieur vers l'extérieur	Box in	DXImageTransform.Microsoft.Iris( irisstyle='SQUARE', motion='in')
1	Carré de l'intérieur vers l'extérieur	Box out	DXImageTransform.Microsoft.Iris( irisstyle='SQUARE', motion='out')
2	Cercle de l'intérieur vers l'extérieur	Circle in	DXImageTransform.Microsoft.Iris( irisstyle='CIRCLE', motion='in')
3	Cercle de l'intérieur vers l'extérieur	Circle out	DXImageTransform.Microsoft.Iris( irisstyle='CIRCLE', motion='out')
4	Linéaire du bas vers le haut	Wipe up	DXImageTransform.Microsoft.Blinds( direction='up', bands=1)
5	Linéaire du haut vers le bas	Wipe down	DXImageTransform.Microsoft.Blinds( direction='down', bands=1)
6	Linéaire de gauche vers la droite	Wipe right	DXImageTransform.Microsoft.Blinds( direction='right', bands=1)
7	Linéaire de la droite vers la gauche	Wipe left	DXImageTransform.Microsoft.Blinds( direction='left', bands=1)
8	Lames de gauche vers la droite	Vertical blinds	DXImageTransform.Microsoft.Blinds( direction='right')
9	Lames du haut vers le bas	Horizontal blinds	DXImageTransform.Microsoft.Blinds( direction='down')
10	Damier de gauche vers la droite)	Checkerboard across	DXImageTransform.Microsoft.CheckerBoard( direction='right')
11	Damier du haut vers le bas	Checkerboard down	DXImageTransform.Microsoft.CheckerBoard( direction='down')
12	Pixellisation	Random dissolve	DXImageTransform.Microsoft.RandomDissolve
13	Linéaire des extémités latérales vers le centre	Split vertical in	DXImageTransform.Microsoft.Barn( orientation='vertical', motion='in')
14	Linéaire du centre vers les extémités latérales	Split vertical out	DXImageTransform.Microsoft.Barn( orientation='vertical', motion='out')
15	Linéaire du haut et du bas vers le centre	Split horizontal in	DXImageTransform.Microsoft.Barn( orientation='horizontal', motion='in')
16	Linéaire du centre vers le haut et le bas	Split horizontal out	DXImageTransform.Microsoft.Barn( orientation='horizontal', motion='out')
17	Ligne diagonale du point supérieur droit vers le point inférieur gauche	Strips left down	DXImageTransform.Microsoft.Strips( motion='leftdown')
18	Ligne diagonale du point inférieur droit vers le point supérieur gauche	Strips left up	DXImageTransform.Microsoft.Strips( motion='leftup')
19	Ligne diagonale du point supérieur gauche vers le point inférieur droit	Strips right down	DXImageTransform.Microsoft.Strips( motion='rightdown')
20	Ligne diagonale du point inférieur gauche vers le point supérieur droit	Strips right up	DXImageTransform.Microsoft.Strips( motion='rightup')
21	Bande horizontale	Random bars horizontal	DXImageTransform.Microsoft.RandomBars( orientation='horizontal')
22	Bande verticale	Random bars vertical	DXImageTransform.Microsoft.RandomBars( orientation='vertical')
23	Aléatoire	Random

• Colonne 1 (#) : Numéro de transition (#) à utiliser dans transition=

L'infobrol sous son ancienne version² vous permettait de tester les effets de balises meta si vous naviquez avec internet explorer. Pour cela, sélectionnez sur une des anciennes pages le style "transition" dans le menu latéral.

Paramètres de langue du site

Si vous préférez continuer sur le site en français, cliquez sur "Annuler". Si vous annulez, ce message n'apparaîtra plus durant la session.

You are on the French version of the site, but your system indicates that you prefer to use the English language.
The entire site is not translated yet, but the menus and buttons on the interface are largely translated.

Would you like to reach the page in English?
Click here to continue in English: Consult the English version of this page

U bevindt zich op de Franse versie van de site, maar uw systeem geeft aan dat u liever de Nederlandse taal gebruikt.
De hele site is nog niet vertaald, maar de menu's en knoppen op de interface zijn grotendeels vertaald.

Wilt u de pagina in het Nederlands bereiken?
Klik hier om door te gaan in het Nederlands: Raadpleeg de Nederlandse versie van deze pagina

Sie befinden sich in der französischen Version der Website, Ihr System gibt jedoch an, dass Sie die deutsche Sprache bevorzugen.
Die gesamte Site ist noch nicht übersetzt, aber die Menüs und Schaltflächen auf der Benutzeroberfläche sind weitgehend übersetzt.

Möchten Sie die Seite auf Deutsch erreichen?
Klicken Sie hier, um fortzufahren: Konsultieren Sie die deutsche Version dieser Seite

Version en cache

21/12/2024 17:25:25 Cette version de la page est en cache (à la date du 21/12/2024 17:25:25) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 19/03/2002, dernière modification le 16/07/2024
Source du document imprimé : https://www.gaudry.be/html-transitions.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

1. ↑ Présentation : Par exemple un diaporama réalisé avec Open Office Présentation ou Microsoft PowerPoint.
   
   
2. ↑ Version Infobrol : Comme c'est le brol sur le site, certaines pages sont encore sous l'ancienne version. A terme ces pages disparaîtront peu à peu.
   
   

Table des matières Haut

Références

1. Interpage Transition Syntax : msdn, Introduction to Filters and Transitions (version 13/02/10)
2. Filtres dynamiques : selfhtml (version 13/02/10)

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.

Table des matières Haut