Sommaire
Catégorie Effets
Cette catégorie regroupe les propriétés relatives à la disposition de l’acteur.
🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule
Angle de rotation
this.properties.rotate · number · défaut 0 · modifie : Style CSS
Angle de rotation en degré.
Cette propriété permet de définir une rotation de l’acteur sur lui même.
La valeur attendue est un nombre positif OU négatif.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Indication :
- Rotation inversée : 180° / -180°.
- Rotation perpendiculaire : 90° / -90°.
Pour vous aider : La propriété définie la valeur de la fonction ‘rotate()’ en CSS dont la documentation est disponible à cette adresse.
Animation
this.properties.animation · string · défaut 'none' · modifie : Style CSS
Animation. Voir information ici
Cette propriété permet de définir des animations CSS sur l’acteur.
Pour déclarer une animation sur un acteur, il est nécessaire en premier lieu que l’animation CSS utilisée soit définie.
Pour cela, il est possible :
- d’utiliser une animation embarquée dans de CSS du runtime de Synapps (voir outils CSS)
- de definir l’animation dans une inclusion CSS (voir les inclusions)
- ou bien de créer un
Acteur HTMLqui contiendra la défintion de l’animation.
Exemple avec un Acteur HTML.
Le contenu de cet Acteur HTML doit être comme suit :
<style>
@keyframes myAnimationName {
instructions de l'animation
}
</style>
Cela permet ainsi de définir une animation qui a pour nom myAnimationName (à changer).
Cette animation pourra par la suite être utilisée par tout autre acteur grâce à son nom de la manière suivante :
Pour vous aider : La documentation concernant les animations en CSS peut être trouvée à cette adresse.
Bulle d’aide
this.properties.toolTip · string · défaut ''
Texte info bulle.
Cette propriété permet de définir une bulle d’aide lors du survol de l’acteur avec la souris.
Le texte renseigné dans le champ de la bulle d’aide s’affiche lorsque l’acteur est survolé avec la souris.
Curseur
this.properties.cursor · string · défaut 'inherit' · héritable · modifie : Style CSS
Curseur souris. Voir information ici
Attention au limitation de taille pour les images : maximum 126x126
Cette propriété permet de définir un curseur spécifique lors du survol de l’élément.
Pour vous aider : Nous avons ajouté une aide à la saisie, vous y trouverez les curseurs les plus utilisés.
Pour y acceder, il suffit de cliquer ici : ↓ en rouge
Puis vous verrez apparaitre le pop-up suivant ↓
La documentation concernant les curseurs en CSS ainsi que la liste de tous les curseurs disponibles peut être trouvée à cette adresse.
Échelle
this.properties.scaling · number · défaut 1 · modifie : Style CSS
Taux de mise à l’échelle.
Cette propriété permet de définir de modifier la taille de l’acteur.
La valeur attendue est un nombre positif OU négatif. Lorsque le nom est compris dans l’intervalle [-1,1], l’élément est réduit. Lorsque la valeur est négative, l’élément est inversé par symétrie centrale.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Pour vous aider : La propriété définie la valeur de la fonction ‘scale()’ en CSS dont la documentation est disponible à cette adresse.
Il n’est pas possible de renseigner deux valeurs comme montré dans la documentation CSS.
Filtre
this.properties.filter · string · défaut 'none' · héritable · modifie : Style CSS
Filtre. Voir information ici *
Cette propriété permet d’ajouter un filtre graphique à l’élément.
La valeur attendue est la propriété avec une unité entre parenthèse précisant l’intensité du changement.
Image originale :
Image avec le filtre ‘blur(5px)’ :
Pour vous aider : La documentation concernant les filtres en CSS ainsi que la liste et l’utilisation des différents filtres peut être trouvée à cette adresse.
Transition
this.properties.transition · string · défaut 'none' · modifie : Style CSS
Transition. Voir information ici
Cette propriété permet de définir la transition entre deux états d’un élément.
La valeur attendue respecte le format suivant : propriété temps.
Pour vous aider : La documentation concernant les transitions en CSS peut être trouvée à cette adresse.
Translation horizontale
this.properties.translateX · string · défaut '0px' · héritable · modifie : Style CSS
Translation horizontale.
Cette propriété permet de déplacer l’élément sur un axe horizontal (x).
La valeur attendue est un nombre positif OU négatif.
L’unité de taille peut être soit définie directement lors de la saisie soit définie grâce à l’aide située dans sur le bouton des réglages.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Pour l’axe X : Lorsque la valeur est négative, l’élément se translate vers la gauche et vers la droite lorsque la valeur est positive.
Pour vous aider : La propriété définie la valeur de la fonction ‘translate()’ en CSS dont la documentation est disponible à cette adresse.
Translation verticale
this.properties.translateY · string · défaut '0px' · héritable · modifie : Style CSS
Translation verticale.
Cette propriété permet de déplacer l’élément sur un axe vertical (y).
La valeur attendue est un nombre positif OU négatif.
L’unité de taille peut être soit définie directement lors de la saisie soit définie grâce à l’aide située dans sur le bouton des réglages.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Pour l’axe Y : Lorsque la valeur est négative, l’élément se translate vers le haut et vers le bas lorsque la valeur est positive.
Pour vous aider : La propriété définie la valeur de la fonction ‘translate()’ en CSS dont la documentation est disponible à cette adresse.
Z-Index
this.properties.zIndex · string · défaut 'auto' · héritable · modifie : Style CSS
Z-index. Voir information ici
Rester entre -9 et 4999 (-10 et 5000 sont réservés aux modales)
Cette propriété permet d’agencer l’affichage des acteurs en leur donnant un indice.
La valeur attendue est un nombre entier positif OU négatif.
Lorsque deux éléments rentre en collision ou se chevauche, cette propriété permettra d’afficher l’élément qui possède la valeur ‘z-index’ la plus haute.
Il est donc nécessaire d’agencer les éléments afin de donner une valeur z-index plus hautes aux éléments de premier plan et plus faible aux éléments de second plan.
Pour vous aider : La documentation concernant les z-index en CSS peut être trouvée à cette adresse.
