Les transitions de pages Web

Sommaire du document

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

Personnellement, je déconseille l'utilisation de ce type de balises, car leur interprétation est fortement dépendante du navigateur (elles ne fonctionnent que sous 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

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

Numéro de transitionEffetNom 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

L'infobrol sous son ancienne version[2] 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.

 

Réseaux sociaux

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

 

Nuage de mots clés

10 mots clés dont 0 définis manuellement (plus d'information...).

Avertissement

Cette page ne possède pas encore de mots clés manuels, ceci est donc un exemple automatique (les niveaux de pertinence sont fictifs, mais les liens sont valables). Pour tester le nuage avec une page qui contient des mots définis manuellement, vous pouvez cliquer ici.

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

 

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.

 

Références

  1. Consulter le document html Langue du document: uk Interpage Transition Syntax : msdn, Introduction to Filters and Transitions (version 13/02/10)
  2. Consulter le document html Langue du document: fr 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.

 

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html
Aucun commentaire pour cette page

© Ce document issu de l′infobrol est enregistré sous le certificat Cyber PrInterDeposit Digital Numbertection. Enregistrement IDDN n° 5329-208
Document créé le 19/03/02 00:00, dernière modification le Vendredi 17 Juin 2011, 11:12
Source du document imprimé : http:///www.gaudry.be/html-transitions.html
St.Gaudry©07.01.02
Outils (masquer)
||
Recherche (afficher)
Recherche :

Utilisateur (masquer)
Apparence (afficher)
Stats (afficher)
15838 documents
455 astuces.
550 niouzes.
3107 definitions.
447 membres.
8121 messages.

Document genere en :
0,10 seconde

Mises à jour :
Mises à jour du site
Citation (masquer)
L'espérance est un risque à courir.

Georges Bernanos
 
l'infobrol
Nous sommes le Mardi 23 Janvier 2018, 20:44, toutes les heures sont au format GMT+1.00 Heure, heure d'hiver