Script JavaScript de défilement de texte dans une page web

Mise-à-jour du 20 février 2009 : Malheureusement, le script dont traite le présent article n’est plus disponible en ligne. Ceux qui cherchent une solution de défilement en JavaScript peuvent se tourner vers des frameworks JavaScript tels que jQuery ou MooTools, deux solutions très réputées.

Mes besoins étaient simples : afin de rendre plus dynamiques et interactives les pages de l’un de mes blogs, je souhaitais faire défiler en haut de l’écran un extrait des derniers commentaires publiés. En somme, le visiteur, dont l’oeil est immanquablement attiré par l’animation du texte et dont l’esprit ne peut s’empêcher de lire les mots qui apparaissent et défilent à l’écran, est invité à cliquer sur les commentaires qui l’interpellent en vue d’y réagir. L’idée, comme l’a suggéré un ami blogueur, est d’accroître la réactivité des lecteurs en leur donnant l’impression de participer à un tchat.

Des scripts de défilement de text, si vous cherchez bien, vous allez en trouver des dizaines, des centaires, voire des milliers ! Seulement voilà, certains ont des inconvénients plutôt majeurs :

  • présents sous forme d’applet Java, ils nécessitent souvent le chargement depuis le serveur de nombreux fichiers composant l’applet dans son ensemble ;
  • que cela soit en Java ou en Flash, ces composants nécessitent sous Internet Explorer 7 un clic additionnel sur leur surface afin de les activer, un deuxième clic est alors nécessaire pour ouvrir un éventuel lien proposé ;
  • les quelques modules Active X génèrent, toujours sous Internet Explorer 7, l’affichage de messages d’avertissement des plus alarmistes refroidissant le plus farouche des Internautes qui s’empressera de quitter au plus vite votre site web, jurant de ne plus jamais y revenir ;
  • parfois, certains scripts fort séduisants en apparence n’existent que sous forme d’applications Windows servant de générateur de script à partir des informations que vous fournissez manuellement dans un Mon Super Scroll Text Wizzard, rendant impossible toute utilisation à partir d’informations dynamiques fournies par le serveur ;
  • dans tous les cas précités, l’intégration des messages au scroll text rend difficile, voire impossible leur interprétation par les robots d’indexation des moteurs de recherche ;
  • enfin, certains scripts ne sont pas compatibles avec les principaux navigateurs du marché.

Le script de défilement de texte retenu a de nombreux avantages :

  • 3 fichiers script JavaScript seulement à intégrer, dont 1 fichier optionnel et 1 fichier que l’on peut qualifier de standard (le fameux Prototype JavaScript Framework) ;
  • possibilité de rassembler les scripts au sein de la page (X)HTML par simple copier-coller ;
  • installation intuitive à partir d’exemples fonctionnels ;
  • défilement de texte, de liens et d’images ;
  • fonctionnalités étendues (scrolling multi-directionnel, glisser-lâcher, etc.) ;
  • texte à défiler intégré normalement à la page web et par conséquent pouvant être généré automatiquement par le serveur et pris en compte par les moteurs de recherche ou bien encore les navigateurs où le JavaScript est désactivé ;
  • compatibilité optimale avec les principaux navigateurs web ;
  • le script est gratuit !

Parmi les inconvénients, on notera quelques limitations gênantes :

  • impossibilité de forcer des pauses prédéfinies sur les textes à défilement horizontal ;
  • impossibilité de réaliser des défilements horizontaux multi-lignes ;
  • importantes limitations de mise en page.

Au final, suite aux divers essais, ce script semble être l’un des plus robustes, fonctionnels et compatibles que j’ai pu découvrir ! Si vous cherchez un bon moyen de faire défiler du texte et des images sur votre site web, ce script est sans doute fait pour vous ! Quoi qu’il en soit, je vous recommande de le découvrir !

Comments

  1. Très bonne idée. Tu fournis le contenue comment ? par script php en tapant dans ta base ou en recupérant le flux rss des commentaires ?

  2. sheepyr, le blog concerné ne comptant qu'une douzaine de commentaires par jour, il apparaît plus pertinent de se contenter de réclamer, au moment de la génération d'une page du blog, via le script PHP associé à la plateforme de blogging de faire une requête à la base de données qui, le cas échant pourra profiter du cache.

    Une autre solution, comme tu le suggères, aurait été d'exploiter le flux RSS des commentaires pour mettre à jour depuis le JavaScript la page web, bref, faire de l'Ajax, "tout simplement". Cependant, compte tenu de la surcharge additionnelle sur le serveur (une requête HTTP additionnelle par chargement de page, plus une requête additionnelle à intervalles de temps réguliers) pour finalement se rendre compte que rien n'a changé dans la quasi-totalité des cas, cela paraît peu pertinent dans le cadre de ce site.

    L'AJAX est une excellente approche pour des utilisations plus adaptées, comme pourrait l'être notamment un habillage de blogs dynamique adapté aux besoins de chaque utilisateur et mis en page d'après les flux RSS du blog, d'une part, et les paramètres de mise en page spécifiques à chaque utilisateur. Le serveur se contenterait alors de fournir des flux RSS (sous forme de XML, donc), d'une part, et les ressources nécessaires à la mise en page (images, etc.), en plus du script (JavaScript) qui reconstruirait la mise en page selon les paramètres de l'utilisateur (qui pourraient être notamment enregistrés dans un cookie).

  3. Ce n’est pas bien d’allécher les gens avec un programme qui à l’air formidable, pour finalement les envoyer sur une page d’erreur 404.
    Peut-être pourriez vous actualiser le lien ou le mettre en téléchargement sur votre site ?
    Merci.

  4. @gege : Je ne suis pas responsable des sites liés depuis le mien. Leur contenu évolue sans que je ne puisse rien y faire et c’est ainsi sur l’ensemble du web qui évolue sans contrôle central, de manière totalement décentralisée. Vous portez un jugement moral quant au contenu de cette page et mes intentions. Or, cette page date du 30 janvier 2007 et je la conserve pour archives, tout comme un journal conserve lui aussi les archives de ses publications, indépendamment des faits plus récents.

    Le script dont il est question ici n’est plus disponible. Je vous invite à vous orienter vers une autre solution, ou éventuellement en faire une par vous-même, par exemple via jQuery, MooTools, Prototype ou encore Scriptaculous.

  5. tres bonne intro. Domage que le lien ne soit plus dispo. je confirme que jquery est une assez bonne solution.

  6. Je souhaite avoir ce script si c est possible. Parce que je trouve pas où je peux le telecharger. Merci bien

  7. je ve avoir comme ce script des commentaire quelqun pe nous donné un lien merci