Comment faire un Effet de Texte qui Tombe sur Shopify

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: 5 sur 1 votes]

Cet article a 4 commentaires

fabien
13 Mar 2023 Répondre

hello dgeodev, merci pour ce code original, cependant j’ai constaté que les mots s’ecrivent sans espace ex: HELLO WORLD s’ecrit HELLOWORLD

merci pour tous ce que tu apportes a la communauté )
1. Dgeo Dev
  14 Mar 2023 Répondre
  
  Hum étrange pourtant ca fonctionne 🙁 tu as bien mis les espaces en appuyant du la barre d’espace en évitant les copier / coller de doc ou autre ? mon code source et fonctionnement ici : https://codepen.io/dgeo-dev/pen/LYmEdvb
fabien
14 Mar 2023 Répondre

j’ai oublié une partie du code ) ca fonctionne , merci♥
1. Dgeo Dev
  16 Mar 2023 Répondre
  
  Super ! bravo 🙂