Comment Faire un Effet de Rotation d’une Image sur Shopify

Nous allons voir dans ce tuto Shopify comment faire tourner une image sur elle même en CSS. Je vous conseille de mettre ce type d’effet sur un badge de confiance rond !  Cet effet c’est assez propice pour ce type d’image. Le tuto en question avec les badges de confiance est présent ici: https://dgeodev.com/tuto-comment-faire-un-footer-avec-badges-de-confiance-sur-shopify/

Intégration du code

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier Ressouces (Assets) – Maintenant trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

Mettez vous tout en bas du fichier et copiez/collez le code suivant:

.dg-rotation {  
  -webkit-animation: rotating 7s linear infinite;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

A ce stade vous devez repérer une image adaptée à cet effet car il faut reconnaitre que ce n’est pas un effet très simple à placer 😉

Installation du code

Une fois l’image trouvée vous allez mettre une classe sur la balise img de cette image ! la classe à rajouter est la suivante:

class="dg-rotation"

Ca va donner quelque chose comme ça:

rotation image en css shopify

Personnaliser la rotation

Vous souhaitez modifier la rapidité à laquelle l’image tourne ? dans ce cas il vous suffit de jouer avec la valeur 7s et de la modifier 😉

Vous avez des difficultés ?

Je vous invite à attendre la version vidéo qui sera plus claire 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 5 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 6 commentaires

  1. Patrick

    9 Mar 2021 Répondre

    Vivement la vidéo oui :). Merci 🙂

    1. Dgeo Dev

      10 Mar 2021 Répondre

      La vidéo est en place :p

  2. Shirley

    2 Avr 2022 Répondre

    Merci ça fonctionne super bien 🙂

    1. mik

      23 Avr 2022 Répondre

      comment a tu fais stp

  3. Nacim

    23 Avr 2022 Répondre

    je ne trouve pas le fichier theme.scss.liquid que faire svp ?

    1. Dgeo Dev

      24 Avr 2022 Répondre

      Hello, il faut essayer de trouve un .css utilisé par le thème dans ce cas. base.css, theme.css, style.css, global.css etc

Laisser un commentaire

Fermer le menu
×
×

Panier