Dans ce tutoriel Shopify nous allons créer un effet de lettres qui tombent sur un titre ou texte. Ce type d’effet est assez tendance à l’heure actuelle et cela permet de vous différencier de la concurrence et de dynamiser ainsi votre boutique !

Mise en place des codes

Rendez-vous dans Boutique en ligne – Actions – Modifier le code et trouvez dans votre dossier Ressources (Assets) un fiche de type .css ! Généralement base.css, style.css ou theme.css. Mettez-vous tout en bas du fichier et copiez/collez le code suivant :

.letters-falls {
  position: relative;
  display: flex;
  flex-wrap:wrap;
  
}

.letters-falls > span  {
  opacity:0;
  animation: drop .4s linear forwards;
}

@keyframes drop {
  0% {transform: translateY(-150px) scaleY(0.9); opacity:0;}
  50% {transform: translateY(0px) scaleY(1); opacity:.5}
  65% {transform: translateY(-17px) scaleY(.9); opacity:1}
  75% {transform: translateY(-22px) scaleY(.9); opacity:1}
  100% {transform: translateY(0px) scaleY(1); opacity:1}
}

Toujours dans le même dossier trouvez cette fois-ci un fichier de type .js, généralement global.js ou theme.js. Une syntaxe .js.liquid peut également être possible.

Comme d’habitude placez-vous en bas du fichier après toutes les lignes de code et copiez/collez le code ci-dessous :


class LettersFalls extends HTMLElement {
  constructor() {
    super();
    
    this.dataset.text = this.textContent;
    this.speed = this.getAttribute('speed');
    this.delay = this.getAttribute('delay');
    this.textContent = '';
    this.data = this.dataset.text;
    this.timer = ms => new Promise(res => setTimeout(res, ms))
    setTimeout(() => {
      this.load();
    }, this.delay || 1000)
    
  }

  async load () { 

    for (var i = 0; i < this.data.length; i++) {
 
      await this.timer(this.speed || 200);
      
      // creates one span per letter
      let span = document.createElement('span');

      // if there are spaces
      if (/\s/.test(this.data.charAt(i))){
        span.innerHTML = " ";
      } else {
        span.textContent = this.data.charAt(i);
      }
  
      this.appendChild(span);

    }
  }

}
customElements.define('letters-falls', LettersFalls);

Placement du texte ou du titre

Le code est une balise custom elle ne peut donc pas être utilisée dans un éditeur de texte de shopify, une description de produit ou page ou autres… Il faudra donc placer ce bout de code manuellement… Soit directement dans un fichier mais je déconseille ou alors dans une section de votre thème à l’aide d’un bloc Liquid ou Html.

Le code d’exemple est ici :

<letters-falls class="letters-falls" delay="500" speed="150">Hello world...</letters-falls>

Il ne vous reste plus qu’à modifier le texte.

Les options possibles

Dans la custom balise vous trouverez 2 options :

  • speed  = la vitesse en millisecondes de l’effet,
  • delay = le temps en millisecondes avant le déclenchement des effets (idéal si vous avez plusieurs textes).

Pour la personnalisation du design (taille, couleur etc…) je vous invite à visionner la version vidéo 😉

Bon tuto à toutes & tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 0 sur 0 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

Laisser un commentaire

Fermer le menu

OFFRE SPÉCIALE -50% SUR LA FORMATION ECOMFLY

1 Bootcamp en vidéo sur le ECOM + 1 Formation Création de Boutique Brandée + 1 Formation SEO sur Shopify