jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > L’effet machine à écrire

L’effet machine à écrire

lundi 18 septembre 2006, par Fil

Tic tic tic... on affiche notre texte caractère par caractère.


En réponse à une question posée sur la liste discuss@jquery.info, voici un effet « machine à écrire ». C’est le code le plus complexe de la série jusqu’ici.

Le fonctionnement est le suivant : au chargement de la page, on lance une fonction .typewriter() sur les blocs de notre choix. Pour définir un plugin, il suffit de l’ajouter aux fonctions de l’objet jQuery ($.fn), sous la forme suivante :

$.fn.typewriter = function() {
 this.each(function() {
   ...
 });
}

Le plugin sera appelé sous la forme $("selecteur").typewriter().

Avant de lancer le this.each() qui indique comment on va traiter chacun des éléments sélectionnés par $("selecteur"), on définit une fonction « enclose », qui ne sera donc créée que si le plugin est utilisé, et bénéficiera des variables de notre fonction $.fn.typewriter :

 var typeone = function(self, text, content) {
   if (text.length > 0) {
     var next = text
       .match(/(\s*(<[^>]*>)?)*(&.*?;|.?)/)[0];
     text = text.substr(next.length);
     $(self).html(content+next);
     setTimeout(function(){
       typeone(self, text, content+next);
     }, opt['delay']);
   }
 }

Que fait cette fonction typeone() ? Simplement, elle « tape un caractère » (d’où son nom...), et programme ensuite la frappe du caractère suivant. Décomposons-la.

Tout d’abord, elle est appelée avec trois paramètres :

  • self définit le nœud du DOM affecté ;
  • text décrit ce qui reste à « taper » ;
  • content décrit ce qui a déjà été « tapé ».

S’il reste du texte à taper — if (text.length > 0) —, on prend, dans la variable next, le premier caractère de text (l’expression régulière complexe sert à absorber un caractère ou un tag HTML ou des espaces).

On enlève ensuite ce caractère du contenu à taper — text = text.substr(next.length); — et on l’ajoute au contenu tapé (ce qui fait qu’il s’affiche avec $(self).html(content+next);).

On relance ensuite la machine, en programmant un nouveau tour de roue de notre fonction dans un délai trouvé dans la variable opt['delay'].

Cette variable avait préalablement été initialisée :

  • soit parce qu’elle avait été passée sous forme d’argument à notre plugin avec $("selecteur").typewriter({'delay':200})
  • sinon, avec la ligne indiquant sa valeur par défaut : opt = opt || { 'delay': 100 };

Puisque notre machine à écrire commence par supprimer le contenu, la boîte dans laquelle on va taper les caractères devient toute petite, et l’écran clignote désagréablement. Pour éviter cela, on fixe la taille de notre boîte en lisant sa hauteur et sa largeur avant effacement du contenu, et en fixant ces valeurs en css, avec la construction :

   $(this).height($(this).height());
   $(this).width($(this).width());

Ne reste plus dès lors qu’à lancer la première frappe du texte, avec un contenu initial « à taper » égal au contenu de départ — $(this).html() —, et un contenu « déjà tapé » vide : typeone(this, $(this).html(), '');

Documents joints

Répondre à cet article

4 Messages de forum

  • $.fn.typewriter = function(opt,callback) {
            var i=0;
            var typeone = function(self, text, content) {
                    if (text.length > 0) {
                            i=i+1;
                            var next = text.match(/(\s*(<[^>]*>)?)*(&.*?;|.?)/)[0];
                            text = text.substr(next.length);
                            $(self).html(content+next);
                            setTimeout(function(){
                                    typeone(self, text, content+next);
                            }, opt['delay']);
                            if(text.length==0) if (callback!=null) callback();
                    }
            }
            this.each(function() {
                    opt = opt || { 'delay': 125 };
                    typeone(this, $(this).html(), '');
            });
            return this;
    }

    Juste un callback en plus.
    Utilisation :

    $("#nom").typewriter(null,function(){
        // ce que vous voulez faire à la fin de l'effet;
    }

    Répondre à ce message

  • (logo)

    L’effet machine à écrire

    17 mars 2010 19:33

    Je débute avec jquery et même si je ne suis pas sur d’avoir absolument tout compris, je trouve que c’est très bien expliqué et ça fonctionne parfaitement !!!

    Répondre à ce message


Derniers commentaires

Nouveautés sur le Web