Animation Javascript pour simuler la saisie

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Simuler la saisie avec Javascript

Nous poursuivons la découverte des petites friandises qu'il est possible de développer pour le Web avec le code Javascript. Avec cette nouvelle astuce, nous proposons d'accueillir l'internaute avec un texte qui donne l'illusion de s'inscrire comme s'il était tapé par des mains humaines.



Dans l'exemple illustré par la capture, un texte de bienvenue se dévoile progressivement lettre après lettre. Mais les intervalles de temps ne sont pas réguliers pour donner l'illusion de quelques hésitations commises au clavier.

Sources de travail
Pour la mise en place de cette nouvelle astuce Javascript, nous proposons de développer à partir d'une page Html existante et préparant quelque peu le travail.

• Télécharger le fichier compressé animation-saisie.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix.

La décompression livre le fichier de la page Web (index.htm). Ses ressources l'accompagnent dans les sous dossiers.

• Double cliquer sur le fichier index.htm pour l'exécuter dans le navigateur Web par défaut,

Nous découvrons une page Html similaire à celle de la présentation. Cependant, son cadre est vide. Il n'accueille aucun texte et forcément aucune animation.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel qui suit, choisir de l'ouvrir avec un éditeur comme le Notepad++,

La portion qui nous intéresse est située dans la partie inférieure du code Html. Elle débute à partir du calque d'identifiant auCentre qui héberge lui-même un calque d'identifiant message.

...
<div id="conteneur">
<div id="contenu">
<!--
Implémentation
-->
<div id="auCentre">
<div id="message">
</div>
</div>
</div>
</div>
...

C'est ce calque d'identifiant message qui doit accueillir le texte animé pour qu'il s'affiche dans le cadre aux bords arrondis.

Plus bas encore dans le code, vous notez l'amorce d'un code Javascript.

...
<script type="text/javascript" language="javascript">
var texte = "Bonjour et Bienvenue dans cette nouvelle aventure !";

</script>
...

A ce stade, il se contente de déclarer la variable mémorisant le texte à animer.

Initialiser les variables
Avant de penser à animer le texte, nous avons besoin de connaître sa longueur pour pouvoir le découper caractère à caractère et restituer les lettres les unes après les autres jusqu'à la dernière. De plus, nous avons besoin d'un compteur capable de progresser au fil de l'animation pour amorcer la découpe du texte toujours un caractère plus loin.

• A la suite du code Javascript, ajouter les deux déclarations de variables suivantes :

<script type="text/javascript" language="javascript">
var texte = "Bonjour et Bienvenue dans cette nouvelle aventure !";
var longueur = texte.length;
var indice=0;

</script>

C'est la propriété length d'une variable de type texte qui retourne le nombre de caractères contenus dans la chaîne. Cette information numérique, nous la stockons dans la variable longueur. Ensuite, nous déclarons une variable numérique pour le compteur. Fort logiquement, nous l'initialisons à zéro pour amorcer la découpe des lettres à restituer à partir de la première.

Initialiser la fonction d'animation
Maintenant pour simuler la saisie du texte dans le calque d'identifiant message, l'astuce consiste à créer une fonction appelée récursivement à intervalles de temps variables. A chaque appel, le rôle de cette fonction sera de restituer une lettre supplémentaire.

• A la suite du code Javascript, ajouter les instructions suivantes :

<script type="text/javascript" language="javascript">
var texte = "Bonjour et Bienvenue dans cette nouvelle aventure !";
var longueur = texte.length;
var indice=0;

ecrire();
function ecrire()
{

}
</script>

Nous appelons une fonction nommée écrire que nous initialisons dans la foulée. Comme son appel est exécuté en dehors des bornes de toute fonction, son exécution se déclenchera naturellement à la fin du chargement de la page Web.

Découper le message lettre à lettre
Cette fonction doit maintenant se charger de restituer les lettres du texte les unes après les autres. Pour les variables de type texte, Javascript offre une méthode permettant de découper les chaînes sur une longueur à déterminer. Cette méthode se nomme substr. En premier paramètre, nous devons lui indiquer la position de départ dans la chaîne pour la découpe et en second, la longueur de cette découpe. Celle-ci doit augmenter d'un caractère à chaque appel de la fonction.

• Dans les bornes de la fonction, ajouter les instructions Javascript suivantes :

<script type="text/javascript" language="javascript">
var texte = "Bonjour et Bienvenue dans cette nouvelle aventure !";
var longueur = texte.length;
var indice=0;

ecrire();
function ecrire()
{
indice++;
document.getElementById("message").innerText = texte.substr(0,indice);
}
</script>

Nous incrémentons la variable indice d'une unité. Elle est donc susceptible de progresser à chaque appel de la fonction. Ensuite, nous exploitons la méthode getElementById de l'objet Javascript document pour pointer sur le calque d'identifiant message. Rappelez-vous, il s'agit de celui dans lequel nous devons animer le texte. Dès lors, nous enrichissons son contenu grâce à sa propriété innerText que nous affectons. Pour cela, grâce à la méthode substr, nous lui passons une portion du texte, en partant du premier caractère (0) et sur une longueur variable (indice) qui progressera à chaque appel.

Forcément à ce stade, si vous enregistrez les modifications et actualisez la page Web sur le navigateur, seule la première lettre (B) du message s'affiche. La fonction n'est pour l'instant appelée qu'une fois et la variable indice vaut 1, engendrant la découpe seulement de la première lettre.

Animer la saisie du texte
Maintenant, il est question d'appeler cette fonction ecrire en boucle et à intervalles de temps variables. Ainsi, à chaque appel, la variable indice progressera et le texte s'allongera comme s'il était saisi.

Pour cela, Javascript offre une fonction dédiée et toute particulière. Elle se nomme setTimeout. En premier argument, nous devons lui indiquer les actions à réaliser. Il s'agit de celles de la fonction ecrire à appeler donc. En second paramètre, nous devons lui indiquer l'intervalle de temps à partir duquel elle doit relancer ces actions. C'est cet intervalle que nous devons faire varier.

• A la suite du code de la fonction, ajouter l'instruction conditionnelle suivante :

<script type="text/javascript" language="javascript">
var texte = "Bonjour et Bienvenue dans cette nouvelle aventure !";
var longueur = texte.length;
var indice=0;

ecrire();
function ecrire()
{
indice++;
document.getElementById("message").innerText = texte.substr(0,indice);
if(indice<longueur)
{
setTimeout(function(){ ecrire() }, Math.random() * 300);
}
}
</script>

En effet, les appels en boucle doivent se stopper impérativement dès lors que la longueur de la chaîne est atteinte et donc que le message est totalement restitué. C'est pourquoi, tant que cette longueur n'est pas atteinte (indice<longueur), nous exploitons la fonction setTimeout pour rappeler la fonction ecrire. Et grâce à la méthode random de l'objet Javascript Math, nous réalisons cet appel à chaque fois sur un intervalle de temps changeant. Cette méthode génère un nombre réel aléatoire compris entre 0 et 1. En le multipliant par 300, nous appelons la fonction ecrire au bout d'un temps compris entre 0 et 300 millisecondes.

De ce code, il doit en résulter une apparition relativement saccadée des lettres du message, comme s'il était saisi au clavier. C'est ce que nous proposons de vérifier.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web (ALT + Tab),
• Rafraîchir la page à l'aide de la touche F5 du clavier,

Les lettres du message apparaissent en effet les unes après les autres et de façon saccadée.