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.

Site language settings

If you prefer to continue on the site in English, click on "Cancel". If you cancel, this message will no longer appear during the session.

U bevindt zich op de Engels 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 Englisch 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

Vous vous trouvez sur la version anglaise du site, mais votre système indique que vous préférez utiliser la langue française.

Souhaitez-vous atteindre la page en français?
Cliquez ici pour continuer en français: Consulter la page en français

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 19/03/2002, last modified the 16/07/2024
Source of the printed document:https://www.gaudry.be/en/html-transitions.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.

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.
   
   

Contents Haut

References

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

These references and links indicate documents consulted during the writing of this page, or which may provide additional information, but the authors of these sources can not be held responsible for the content of this page.
The author This site is solely responsible for the way in which the various concepts, and the freedoms that are taken with the reference works, are presented here. Remember that you must cross multiple source information to reduce the risk of errors.

Contents Haut