Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Animations et effets d’image

Vous pouvez ajouter des animations à une petite zone de votre site, comme un arrière-plan de section ou un bloc Image, ou vous pouvez activer des animations à l’échelle du site qui apparaissent lorsque les visiteurs parcourent votre site.

Ce guide explique comment activer différents effets d’animation dans différentes zones de votre site.

Conseil : pour ajouter des effets de survol à votre site, comme des titres et des légendes d’images, consultez l’article Créer des effets de survol pour vos images.

Avant de commencer

  • Les animations insérées dans chaque bloc Image, bloc Citation et autres zones remplacent les animations à l’échelle du site.
  • Certaines pages de collection, comme les pages Blog et les pages Portfolio, ont toujours des animations discrètes lorsque la page se charge, même lorsque les animations à l’échelle du site sont désactivées. 
  • Lorsque vous désactivez les animations de blocs et de pages, les styles à l’échelle du site sont appliqués.

Animations à l'échelle du site

Les animations à l’échelle du site ne sont disponibles que dans la version 7.1.

Les animations à l’échelle du site s’appliquent à la plupart des zones de votre site, avec des effets plus ou moins visibles selon les zones. Ces animations ont principalement un impact sur la façon dont les images, le texte et les autres blocs apparaissent lorsque vous faites défiler une page. Certaines animations s’affichent également lorsqu’un visiteur survole des liens et des boutons. 

Nous vous recommandons d’activer un style d’animation, puis de constater son rendu sur différentes pages de votre site. Essayez chaque style jusqu’à ce que vous trouviez celui qui convient le mieux pour votre contenu.

Pour animer le contenu du site :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Animations.
  2. Cliquez sur un style d’animation.
  3. Choisissez une vitesse d’animation Lente, Moyenne ou Rapide.
  4. Survolez Terminé et cliquez sur Enregistrer.

Styles d’animation

Choisissez parmi les styles d'animation suivants :

  • Aucun : désactive les animations à l'échelle du site.
  • Fondu - Le contenu apparaît en fondu sur la page.
  • Échelle : le contenu s'anime et passe d'une taille plus petite à sa taille finale, créant un effet de zoom.
  • Diapositive - Le contenu glisse du bas vers le haut pour atteindre sa place, accentuant l'effet de défilement vers le bas de la page.
  • Rogner - Le contenu glisse ligne par ligne à partir de la gauche.
  • Flex - Ajoute des animations uniques aux titres, au texte des liens, aux boutons et aux pages Portfolio.

Supprimer les animations à l'échelle du site

Pour désactiver les animations à l'échelle du site :

  1. Pendant que vous modifiez une page, cliquez sur l’icône en forme de pinceau, puis sur Animations.
  2. Choisissez Aucun.
  3. Survolez Terminé et cliquez sur Enregistrer.

Regarder une vidéo

Effets d’arrière-plan

Les effets d’image d’arrière-plan ne sont disponibles que sur la version 7.1.

Si votre section de page comporte une image d’arrière-plan, vous pouvez ajouter des effets d’image pour donner à l’arrière-plan un aspect plus saisissant. Certains effets ajoutent une animation de sorte que l’image est constamment en mouvement, tandis que d’autres n’apparaissent que lorsque le visiteur fait défiler cette section de votre site.

Pour ajouter un effet d’image :

  1. Après avoir ajouté un arrière‑plan de section, dans l’éditeur de section, cliquez sur Arrière‑plan.
  2. Faites défiler l’écran vers le bas jusqu’à Effet d’image et choisissez un effet dans le menu déroulant. L’effet apparaîtra sur l’aperçu de votre site.
  3. Survolez Terminé et cliquez sur Enregistrer.

Important :

  • Les effets d’image apparaissent uniquement sur les navigateurs et les appareils qui prennent en charge WebGL, un outil qui fonctionne avec le processeur graphique de votre appareil. Pour vérifier si votre navigateur est compatible, consultez la page get.webgl.org. Si le navigateur ne prend pas en charge WebGL, l’arrière‑plan de la section restera statique.
  • Les effets d’image n’apparaissent pas sur les vidéos d’arrière‑plan.

Vidéos d’arrière-plan

Vous pouvez ajouter des vidéos d’arrière-plan à des sections de page, à des bannières et à d’autres zones en fonction de la version de votre site.

Important :

Motif d’arrière-plan

Les motifs d’arrière-plan uniques ne sont disponibles que sur la version 7.1.

Vous pouvez ajouter un motif d’arrière-plan unique aux sections de page au lieu d’une image ou d’une vidéo. Choisissez un motif animé pour un look dynamique ou optez pour un dégradé de couleurs plus subtil. Vous pouvez utiliser un motif prédéfini ou personnaliser le graphisme avec les formes et les mouvements de votre choix. 

Pour ajouter un motif d’arrière-plan :

  1. Dans l’éditeur de sections, cliquez sur Arrière-plan, puis sur Art.
  2. Cliquez sur une vignette pour afficher un aperçu du motif dans la section. Les couleurs sont extraites des options Vif de votre palette de couleurs
  3. Pour peaufiner le design, cliquez sur l’un des petits cercles qui apparaissent au-dessus de la tuile.
  4. Pour le personnaliser encore davantage, cliquez sur l’icône des paramètres pour ouvrir le panneau de détails. Reportez-vous aux instructions ci-dessous pour en savoir plus.
  5. Lorsque vous avez trouvé le design qui vous plaît, survolez Terminé en haut à gauche de l'éditeur de pages, puis cliquez sur Enregistrer.

Personnaliser les détails de l’arrière-plan

Vous pouvez personnaliser davantage votre motif d’arrière-plan dans le panneau de détails. Pour afficher les détails d’un arrière-plan, cliquez sur une miniature, puis sur l’icône des paramètres

settings_icon.png

Faites défiler les options et les paramètres jusqu’à trouver un motif qui vous plaît. Selon le motif d’arrière-plan sélectionné, différentes catégories s’affichent. Cliquez sur une catégorie pour ouvrir le menu déroulant et afficher d’autres options.

Par exemple :

  • Dans la plupart des panneaux de détails de l’arrière-plan, vous pouvez cliquer sur Inverser les couleurs pour échanger les couleurs attribuées. 
  • Dans le panneau de détails de n’importe quel arrière-plan, vous pouvez cliquer sur Randomiser pour tester une configuration aléatoire.

Les autres paramètres sont spécifiques à chaque style de motif d’arrière-plan, et comprennent des curseurs et des sélecteurs qui modifient les composants principaux du motif. Nous vous recommandons d’essayer les différentes options de chaque panneau de détails jusqu’à ce que vous trouviez une combinaison qui vous plaît.  

Important :

  • Si votre section contient du texte ou un autre contenu, veillez à ce qu’il soit toujours visible et lisible devant votre motif d’arrière-plan. Pour modifier la couleur du texte et ajuster la police, utilisez le thème de couleur de cette section. 
  • Les motifs d’arrière-plan s’affichent uniquement sur les navigateurs et les appareils qui prennent en charge WebGL, un outil qui fonctionne avec le processeur graphique de votre appareil. Pour vérifier si votre navigateur prend en charge cette fonctionnalité, rendez-vous sur get.webgl.org. Si un navigateur ne prend pas en charge WebGL, l’arrière-plan de la section reste statique.
  • Si le motif ajouté à la section est animé, celle-ci comprendra un bouton de pause dans le coin inférieur droit. Ce bouton permet de rendre votre site accessible aux visiteurs susceptibles d’être désorientés par des arrière-plans mouvants. Il n’est pas possible de désactiver ce bouton.

Regarder une vidéo

Animations des blocs

Vous pouvez ajouter des animations aux blocs Image et aux blocs Citation que les visiteurs voient lorsqu’ils chargent ou actualisent la page.

Blocs Image

Pour animer un bloc Image :

  1. Dans lʼéditeur de bloc Image, cliquez sur Design, puis sur Animations.
  2. Sélectionnez un effet dans la liste afin de lʼappliquer à lʼimage et au texte. Lorsque vous sélectionnez une option, un aperçu sʼaffiche sur la page.
  3. Pour animer lʼimage et le texte séparément, sélectionnez Personnalisé, puis sélectionnez les options pour Image et Texte.

Faites votre choix parmi les options d’animation suivantes (disponibles pour votre image, votre texte ou les deux) :

  • Fondu – Le bloc, l’image ou le texte apparaissent en fondu
  • Glissement vers le haut – Le bloc, l’image ou le texte glissent vers le haut
  • Glissement vers le bas - L’image ou le texte glisse vers le bas
  • Extrait horizontal – Le bloc ou l’image sont chargés en calques horizontaux
  • Extrait vertical – Le bloc ou l’image sont chargés en calques verticaux
  • Incliner vers le haut – Le bloc ou l’image sont agrandis et inclinés vers le haut
  • Incliner vers le bas – Le bloc ou l’image sont agrandis et inclinés vers le bas
  • Mise au point – Le bloc, l’image ou le texte sont flous avant de devenir nets
  • Collision - L’image et le texte glissent depuis les côtés vers l’intérieur
  • Révéler – L’image et le texte glissent depuis le centre vers l’extérieur
  • Glissement en partant de la gauche - L’image ou le texte glisse en partant de la gauche
  • Glissement en partant de la droite - L’image ou le texte glisse en partant de la droite

Blocs Citation

Pour animer un bloc Citation :

  1. Cliquez sur l’onglet Design dans l’éditeur de blocs.
  2. Sélectionnez un effet dans le menu de déroulant. Lorsque vous explorez les différentes options, un aperçu du chargement s’affiche.

Choisissez parmi les options suivantes :

  • Fondu - Le texte apparaît en fondu
  • Glissement vers le haut - Le texte glisse vers le haut
  • Mise au point - Le texte est flou avant de devenir net
  • Apparition - Le texte glisse du centre vers l’extérieur

Dépannage

Si les animations n’apparaissent pas sur votre site, voici quelques aspects à prendre en compte :

  • Les animations à l’échelle du site et les arrière-plans de section ne sont disponibles que sur la version 7.1.
  • Certains contenus prennent uniquement en charge le style d’animation à l’échelle du site Fondu. Si vous sélectionnez un autre style et que le contenu ne peut pas le prendre en charge, il apparaîtra en fondu à la place.
  • Si aucun de vos contenus n’est animé, assurez-vous d’utiliser un navigateur pris en charge.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 68 sur 119
Animations et effets d’image