Ajouter une traînée d’images qui suit le curseur

Mis à jour le mois dernier

Le bloc Effet de traînée affiche des images qui suivent le curseur lorsque les visiteurs déplacent leur souris sur une section. Vous l’ajoutez dans l’éditeur de thème Shopify, fournissez ses images au moyen de blocs Image de l’effet de traînée imbriqués et ajustez l’apparence de la traînée à l’aide des paramètres du bloc.

Ajouter le bloc Effet de traînée

L’effet est un bloc de thème, il se trouve donc à l’intérieur d’une section de votre page. Dans l’éditeur de thème, ouvrez la section dans laquelle vous souhaitez ajouter l’effet, puis ajoutez-y le bloc Effet de traînée.

Choisir les images de la traînée

Ajoutez un bloc Image de l’effet de traînée pour chaque image que vous souhaitez inclure dans la traînée, puis définissez son paramètre Image. Lorsqu’aucune image n’est définie dans un bloc d’image, un espace réservé s’affiche à la place.

Ajuster l’apparence de la traînée

Les paramètres du bloc contrôlent l’apparence de la traînée. Définissez Mode sur Traînée pour que les images suivent le curseur, ou sur Canon pour déclencher une salve d’images lorsqu’un visiteur clique. Les paramètres spécifiques à la traînée s’affichent uniquement lorsque Traînée est le mode actif :

Longueur de la traînée — le nombre d’images dans la traînée, de 1 à 20 (10 par défaut).
Délai de la traînée — le délai entre les images, en millisecondes, de 10 à 100 par incréments de 5 (30 par défaut).
Effet de fondu de la traînée — détermine quand la traînée disparaît progressivement : Fondu après un délai ou Fondu après la fin de la traînée (Fondu après un délai par défaut).
Largeur de l’image de la traînée (rem) — la largeur de chaque image, de 1 à 20 rem (6 par défaut).

Pour obtenir la liste complète des paramètres et de leurs valeurs par défaut, consultez la référence du bloc Effet de traînée.

Prévisualiser sur ordinateur

La traînée est activée par les mouvements de la souris : elle apparaît donc uniquement lorsqu’un visiteur déplace le curseur de sa souris. Sur un appareil tactile, il n’y a pas de curseur de souris et la traînée n’est pas activée par les mouvements du doigt ; elle reste donc inactive. Prévisualisez l’effet dans un navigateur sur ordinateur pour vérifier son apparence et utilisez Masquer le bloc sur ordinateur / sur mobile pour contrôler les endroits où le bloc s’affiche.

FAQ

Comment ajouter une traînée d’images qui suit le curseur dans Pops ?

Dans l’éditeur de thème Shopify, ouvrez la section dans laquelle vous souhaitez ajouter l’effet, puis ajoutez-y le bloc Effet de traînée. Ajoutez ensuite un bloc Image de l’effet de traînée pour chaque image que vous souhaitez inclure dans la traînée, puis définissez son paramètre Image.

Quelle est la différence entre les modes Traînée et Canon ?

Le mode Traînée fait suivre les images au curseur lorsque les visiteurs déplacent leur souris sur une section. Le mode Canon déclenche une salve d’images lorsqu’un visiteur clique.

Combien d’images la traînée peut-elle afficher à la fois ?

Définissez Longueur de la traînée sur le nombre d’images souhaité dans la traînée, de 1 à 20. La valeur par défaut est 10.

Pourquoi la traînée ne s’affiche-t-elle pas sur un téléphone ou un appareil tactile ?

La traînée est activée par les mouvements de la souris : elle apparaît donc uniquement lorsqu’un visiteur déplace le curseur de sa souris. Un appareil tactile n’a pas de curseur de souris et la traînée n’est pas activée par les mouvements du doigt ; elle reste donc inactive. Prévisualisez l’effet dans un navigateur sur ordinateur pour vérifier son apparence.

Comment contrôler la façon dont la traînée disparaît progressivement ?

Définissez Effet de fondu de la traînée sur Fondu après un délai ou Fondu après la fin de la traînée. La valeur par défaut est Fondu après un délai.

Cela vous a-t-il été utile ?