Des placeholders animés avec superplaceholder JS

Elliott Chiaradia |05-04-2016

Un placeholder (le petit texte présent dans les champs des formulaires) est toujours utile pour donner plus d’indications à l’utilisateur sur ce qu’il doit remplir et cela sans trop polluer la page. Mais nous nous sommes tous un jour confronté à un formulaire d’inscription barbant, qu’on a dû remplir plusieurs fois car le mot de passe était très restrictif et sans en tester plusieurs, pas moyen de savoir ce qu’il faut remplir pour qu’il soit validé. Afin d’éviter ce problème, une solution consiste à écrire en dessous de chaque champ ce que l’on attend de l’utilisateur, mais vous en conviendrez que cette méthode peut facilement enlaidir la page.

Et si l'on rajoutait des placeholders animés ? Des placesholders pouvant afficher plus d’informations qu’à l’ordinaire ? Non seulement l’animation rendrait la chose plus vivante, plus dynamique, mais en plus, l’expérience utilisateur n’en serait qu’améliorée.

C'est là que Superplaceholder.js entre dans la place ! Cette petite librairie javascript bien sympathique permet de customer nos placeholders afin de les animer.

C’est bien joli tout ça, mais rien n’est plus efficace qu’une démo pour se rendre compte de la chose, c’est pourquoi je vous invite à tester la démo officielle de la librairie, elle est disponible ici.

Maintenant que vous êtes convaincu qu’il vous faut un placeholder animé pour votre futur projet, passons à la pratique.

Un peu de pratique

Tout d’abord, vous devez télécharger le zip contenant le script à cette adresse. Le script qui nous intéresse se trouve dans superplaceholder.js-master/dist/ superholder.min.js.

Voici un placeholder classique, celui-ci affiche « lastname » dans le champ.

<!DOCTYPE html>
<html lang="fr">
    <form>
        <input type="text" name="lastname" placeholder="lastname">
    </form>
</html>

Et voici comment customer notre placeholder en superplaceholder. Il suffit de donner un id à notre champ, de déclarer un appel au script superplaceholder.min.js se trouvant dans le .zip que nous avons téléchargé précédemment, puis de finalement créer un petit script propre à superplaceholder contenant les options de notre placeholder. Dans cet exemple, notre input contiendra donc le texte animé « 3 lettres minimum ».

<!DOCTYPE html>
<html lang="fr">
    <form>
        <input id="firstname" type="text" name="firstname" placeholder="firstname" style="width:400px;">
    </form>
    
    <script src="superplaceholder.min.js"></script>
    
    <script>
        superplaceholder({
            el: document.querySelector('#firstname'),
            sentences: [ '3 lettres minimum'],
        });
    </script>
</html>

Passons à un second exemple. Dans celui-ci, nous allons afficher deux textes animés à savoir « 8 lettres » et « Au moins un chiffre ». En plus de cela, nous allons configurer quelques petites options.

<!DOCTYPE html>
<html lang="fr">
    <form>
        <input id="password" type="text" name="password" placeholder="password" style="width:400px;">
    </form>
    
    <script src="superplaceholder.min.js"></script>
    
    <script>
        superplaceholder({
            el: document.querySelector('#password'),
            sentences: [ '8 lettres','Au moins un chiffre'],
            options: {
                letterDelay: 80, // milliseconds
                sentenceDelay: 1200,
                loop: true,
            }
        });
    </script>
</html>

Comme vous l’avez certainement compris, l’option « letterDelay » permet de définir le laps de temps en milliseconde entre chaque apparition d’une lettre. Quant à « sentenceDelay », elle permet de configurer le laps de temps en milliseconde entre chaque changement de phrases (si vous avez défini plusieurs phrases différentes dans « sentences », bien évidemment). Et finalement, l’option « loop » permet de choisir si le changement de phrases se fait en boucle infinie ou non.

Il existe encore d'autres options, comme « shuffle », qui, si passée à true, affiche les phrases dans un ordre aléatoire. Toutes les options sont répertoriées dans la documentation du plugin disponible via le github.

Sources :