Les transitions de pages Web

Inhaltsverzeichnis

De la méme manière que nous pouvons déterminer des transitions entre une présentation1, nous pouvons réaliser différents effets de transition de pages avec les balises meta.

Information (14/02/2010)

J'avais réalisé cette page le 19/03/2002, dans la fougue de la découverte des possibilités du Web. Je laisse donc ces pages à titre d'information, mais avec le recul je ne suis pas du tout convaincu, car les différents effets présentés ici ne sont valables que pour le navigateur Internet Explorer.

Exemple de syntaxe

  1. <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
  2. <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 :

revealTrans

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

revealTrans s'applique aux éléments suivants :

Paramètres :

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

Transitions possibles avec revealTrans

#EffetNom anglaisImplémentation alternative
#EffetNom anglaisImplémentation alternative
0Carré de l'intérieur vers l'extérieurBox inDXImageTransform.Microsoft.Iris( irisstyle='SQUARE', motion='in')
1Carré de l'intérieur vers l'extérieurBox outDXImageTransform.Microsoft.Iris( irisstyle='SQUARE', motion='out')
2Cercle de l'intérieur vers l'extérieurCircle inDXImageTransform.Microsoft.Iris( irisstyle='CIRCLE', motion='in')
3Cercle de l'intérieur vers l'extérieurCircle outDXImageTransform.Microsoft.Iris( irisstyle='CIRCLE', motion='out')
4Linéaire du bas vers le hautWipe upDXImageTransform.Microsoft.Blinds( direction='up', bands=1)
5Linéaire du haut vers le basWipe downDXImageTransform.Microsoft.Blinds( direction='down', bands=1)
6Linéaire de gauche vers la droiteWipe rightDXImageTransform.Microsoft.Blinds( direction='right', bands=1)
7Linéaire de la droite vers la gaucheWipe leftDXImageTransform.Microsoft.Blinds( direction='left', bands=1)
8Lames de gauche vers la droiteVertical blindsDXImageTransform.Microsoft.Blinds( direction='right')
9Lames du haut vers le basHorizontal blindsDXImageTransform.Microsoft.Blinds( direction='down')
10Damier de gauche vers la droite)Checkerboard acrossDXImageTransform.Microsoft.CheckerBoard( direction='right')
11Damier du haut vers le basCheckerboard downDXImageTransform.Microsoft.CheckerBoard( direction='down')
12PixellisationRandom dissolveDXImageTransform.Microsoft.RandomDissolve
13Linéaire des extémités latérales vers le centreSplit vertical inDXImageTransform.Microsoft.Barn( orientation='vertical', motion='in')
14Linéaire du centre vers les extémités latéralesSplit vertical outDXImageTransform.Microsoft.Barn( orientation='vertical', motion='out')
15Linéaire du haut et du bas vers le centreSplit horizontal inDXImageTransform.Microsoft.Barn( orientation='horizontal', motion='in')
16Linéaire du centre vers le haut et le basSplit horizontal outDXImageTransform.Microsoft.Barn( orientation='horizontal', motion='out')
17Ligne diagonale du point supérieur droit vers le point inférieur gaucheStrips left downDXImageTransform.Microsoft.Strips( motion='leftdown')
18Ligne diagonale du point inférieur droit vers le point supérieur gaucheStrips left upDXImageTransform.Microsoft.Strips( motion='leftup')
19Ligne diagonale du point supérieur gauche vers le point inférieur droitStrips right downDXImageTransform.Microsoft.Strips( motion='rightdown')
20Ligne diagonale du point inférieur gauche vers le point supérieur droitStrips right upDXImageTransform.Microsoft.Strips( motion='rightup')
21Bande horizontaleRandom bars horizontalDXImageTransform.Microsoft.RandomBars( orientation='horizontal')
22Bande verticaleRandom bars verticalDXImageTransform.Microsoft.RandomBars( orientation='vertical')
23AléatoireRandom
  • Colonne 1 (#) : Numéro de transition (#) à utiliser dans transition=

L'infobrol sous son ancienne version2 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.

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 19/03/2002, zuletzt geändert 16/07/2024
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/html-transitions.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.

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

Inhaltsverzeichnis Haut

Referenzen

  1. Zeigen Sie - html-Dokument Sprache des Dokuments:uk Interpage Transition Syntax : msdn, Introduction to Filters and Transitions (version 13/02/10)
  2. Zeigen Sie - html-Dokument Sprache des Dokuments:fr Filtres dynamiques : selfhtml (version 13/02/10)

Diese Verweise und Links verweisen auf Dokumente, die während des Schreibens dieser Seite konsultiert wurden, oder die zusätzliche Informationen liefern können, aber die Autoren dieser Quellen können nicht für den Inhalt dieser Seite verantwortlich gemacht werden.
Der Autor Diese Website ist allein dafür verantwortlich, wie die verschiedenen Konzepte und Freiheiten, die mit den Nachschlagewerken gemacht werden, hier dargestellt werden. Denken Sie daran, dass Sie mehrere Quellinformationen austauschen müssen, um das Risiko von Fehlern zu reduzieren.

Inhaltsverzeichnis Haut