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 font défiler 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. 
  • Il n’est pas possible d’ajouter des animations dans l’application Squarespace. 
  • 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 se 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

Animations d’arrière-plan

Vous pouvez animer l’arrière-plan de votre site avec des effets d’image ou une vidéo en boucle, en fonction de la version de votre site.

Effets d’image

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. 

  • Les vidéos d’arrière-plan sont lues en boucle sans le son.
  • Pour ajouter une vidéo d’arrière-plan, vous avez besoin d’une URL YouTube ou Vimeo. Il n’est pas possible de charger une vidéo directement sur Squarespace. 

Pour en savoir plus, consultez l’article Ajouter des vidéos d’arrière-plan

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 : 27 sur 54
Animations et effets d’image