Transformez vos projets clients grâce à nos effets WebGL, conçus pour transformer les arrière-plans des médias en objets de prestige. Ces effets suscitent l'intérêt des visiteurs du site tout en garantissant des performances optimales. Choisissez parmi une variété d'éléments prédéfinis impressionnants, modifiez leurs propriétés et décidez de la manière dont ils s'activent : automatiquement lors du défilement ou via le mouvement de la souris du visiteur.
Ajouter un effet WebGL
Accédez au panneau Inspecteur pour ajouter un effet WebGL à l'arrière-plan des médias de la section. Vous pouvez choisir parmi différents éléments prédéfinis, en fonction de l'aspect et de l'interaction que vous souhaitez obtenir.
Pour ajouter un effet WebGL :
- Ajoutez une image ou une vidéo à l'arrière-plan de la section concernée.
Remarque : Les effets WebGL ne sont pas pris en charge pour les arrière-plans GIF, ainsi que pour les arrière-plans de médias configurés pour s'adapter aux mosaïques. - Sélectionnez la section sur la toile.
- Appliquez un effet WebGL :
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets
. - Cliquez sur + Ajouter sous Effets WebGL.
- Sélectionnez un effet dans la liste.
Personnaliser un effet WebGL
Personnalisez les effets WebGL pour affiner leur aspect et leur comportement, qu'il s'agisse d'ajouter des distorsions subtiles ou des mouvements dynamiques et audacieux. Chaque effet est accompagné de son propre ensemble de paramètres réglables (intensité, vitesse et direction), ce qui vous permet de contrôler totalement la façon dont il interagit avec votre contenu.
Pour certains effets, vous pouvez également décider de ce qui les déclenche sur le site de votre client : lecture automatique, défilement, mouvement de la souris ou combinaison d'actions multiples.
Pour personnaliser un effet WebGL :
- Sélectionnez la section concernée.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets .
- Cliquez sur l'effet que vous souhaitez modifier.
- Cliquez sur Ajuster l'animation pour modifier ses paramètres :
- Taille du pointeur : Faites glisser le curseur pour modifier la zone qui répond à l'effet lorsqu'un visiteur survole l'arrière-plan de la section. L'augmentation de la zone rend l'effet plus visible, tandis que sa diminution permet de mieux cibler la zone.
- Sonorité : Faites glisser le curseur pour contrôler le niveau de son. L'augmentation du son rend l'effet plus texturé et déformé.
- Vitesse du pointeur : Faites glisser le curseur pour contrôler la vitesse à laquelle le mouvement suit la souris lorsqu'un visiteur survole l'arrière-plan de la section.
- Intensité : Faites glisser le curseur pour contrôler l'intensité de l'effet. En augmentant l'intensité, l'arrière-plan de la section semble plus déformé lorsque les visiteurs le survolent.
- Taille du pointeur : Faites glisser le curseur pour modifier la zone qui réagit à l'effet lorsqu'un visiteur survole l'arrière-plan de la section. L'augmentation de la zone rend l'effet plus visible, tandis que sa diminution permet de mieux cibler la zone.
- Vitesse du pointeur : Faites glisser le curseur pour contrôler la vitesse à laquelle le mouvement suit la souris lorsqu'un visiteur survole l'arrière-plan de la section.
Remarque : Les paramètres disponibles peuvent varier en fonction du ou des déclencheurs que vous choisissez.
- Déclencheur : Sélectionnez un déclencheur, ou plusieurs déclencheurs, pour activer l'effet : lecture automatique, mouvement de la souris ou défilement. Ajoutez plus de déclencheurs en cliquant sur l'icône Ajouter
et retirez un déclencheur en cliquant sur l'icône Supprimer 
à côté.
- Direction : Choisissez une direction pour l'effet - horizontale ou verticale.
- Duplication : Faites glisser le curseur pour contrôler la façon dont la fente capture les nouvelles lignes à partir de l'arrière-plan de l'image ou de la vidéo. Un plus grand nombre de doublons rend l'effet plus dynamique, tandis qu'un plus petit nombre permet une transformation plus lente.
- Vitesse du pointeur : Faites glisser le curseur pour contrôler la vitesse à laquelle le mouvement suit la souris lorsqu'un visiteur survole l'arrière-plan de la section.
- Vitesse de lecture automatique : Faites glisser le curseur pour contrôler la vitesse à laquelle les lignes se déplacent.
- Couleurs : Sélectionnez les couleurs qui se mélangent et virgulent pour créer l'effet halo : toutes, vert et magenta, etc.
- Angle des couleurs : Faites glisser le curseur pour définir l'angle de fusion et de transition des couleurs.
- Taille du pointeur : Faites glisser le curseur pour modifier la zone qui répond à l'effet lorsqu'un visiteur survole l'arrière-plan de la section. L'augmentation de la zone rend l'effet plus visible, tandis que sa diminution permet de mieux cibler la zone.
- Sonorité : Faites glisser le curseur pour contrôler le niveau de son. L'augmentation du son rend l'effet plus texturé et déformé.
- Vitesse du pointeur : Faites glisser le curseur pour contrôler la vitesse à laquelle le mouvement suit la souris lorsqu'un visiteur survole l'arrière-plan de la section.
- Étirer l'ondulation : Faites glisser le curseur pour ajuster la largeur des vagues d'ondulation, ce qui a pour effet de les développer ou de les contracter.
- Intensité : Faites glisser le curseur pour contrôler l'intensité de l'effet. L'augmentation de l'intensité rend les ondulations plus spectaculaires et plus faciles à voir.
- Sonorité : Faites glisser le curseur pour contrôler le niveau de son. L'augmentation du son rend l'effet plus texturé et déformé.
- Vitesse de lecture automatique : Faites glisser le curseur pour contrôler la vitesse à laquelle les ondulations se déplacent.
Remarque : Les paramètres disponibles peuvent varier en fonction du ou des déclencheurs que vous choisissez.
- Déclencheur : Sélectionnez un déclencheur, ou plusieurs déclencheurs, pour activer l'effet : lecture automatique, mouvement de la souris ou défilement. Ajoutez plus de déclencheurs en cliquant sur l'icône Ajouter et retirez un déclencheur en cliquant sur l'icône Supprimer à côté.
- Couleurs : Sélectionnez les couleurs qui créent l'effet de division : toutes, vert et magenta, etc. Ces couleurs apparaissent comme des couches fragmentées sur l'arrière-plan de la section.
- Décalage des canaux : Faites glisser le curseur pour ajuster l'alignement des canaux de couleur. L'augmentation du décalage sépare et estompe les couleurs, créant un effet plus intense et psychédélique.
- Angle : Faites glisser le curseur pour configurer l'angle de rotation des couleurs dans l'effet.
- Taille du pointeur : Faites glisser le curseur pour modifier la zone qui réagit à l'effet lorsqu'un visiteur survole l'arrière-plan de la section. L'augmentation de la zone rend l'effet plus visible, tandis que sa diminution permet de mieux cibler la zone.
- Sonorité : Faites glisser le curseur pour contrôler le niveau de son. L'augmentation du son rend l'effet plus texturé et déformé.
- Vitesse du pointeur : Faites glisser le curseur pour contrôler la vitesse à laquelle le mouvement suit la souris lorsqu'un visiteur survole l'arrière-plan de la section.
- Vitesse de lecture automatique : Faites glisser le curseur pour contrôler la vitesse à laquelle les couleurs se déplacent.
Supprimer un effet WebGL
Vous pouvez toujours retirer un effet WebGL que vous avez précédemment ajouté à l'arrière-plan d'une section.
Pour retirer un effet Webgl :
- Sélectionnez la section concernée.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets .
- Cliquez sur l'icône Plus d'actions
à côté de l'effet WebGL. - Sélectionnez Supprimer.
FAQ
Cliquez sur une question ci-dessous pour en savoir plus sur les effets WebGL dans l'éditeur Studio.
Les effets WebGL fonctionnent-ils sur les appareils à écran tactile ?
Certains effets WebGL nécessitent un curseur de souris, ils n'apparaîtront donc pas sur les appareils à écran tactile :
- Les effets Grain, Halo RVB et Distorsion ne peuvent être déclenchés que par le mouvement de la souris. Dans ce cas, vous pouvez passer à un effet différent pour résoudre le problème.
- Dans Slit-scan et Division RVB, vous choisissez ce qui déclenche l'effet. Si le mouvement de la souris est votre seul déclencheur, l'effet est désactivé sur les appareils à écran tactile. Pour que l'effet apparaisse, ajoutez un autre déclencheur (ex. Lecture automatique).
- L'effet Ondulation est configuré pour la lecture automatique sur tous les appareils, il s'affiche donc sur les écrans tactiles sans action nécessaire de votre part.
Pourquoi l'option pour ajouter des effets WebGL est-elle grisée dans mon éditeur ?
Il peut y avoir plusieurs raisons :
- Vous avez peut-être ajouté un arrière-plan GIF, qui ne prend pas en charge les effets WebGL.
- Vous avez peut-être configuré l'arrière-plan de vos médias sur Mosaïque (sous Options d'ajustement).
Pour modifier l'ajustement de l'arrière-plan :
- Sélectionnez la section concernée.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.
- Faites défiler la page jusqu'à Options d'ajustement sous Design.
- Sélectionnez Taille d'origine ou Échelle pour remplir.
