Développement de Scroll Bar Buddy, une barre de défilement qui descend avec la page

 (focusfurnace.com)
1 points par GN⁺ 2025-03-04 | 1 commentaires | Partager sur WhatsApp
  • Scroll Buddy est un premier prototype qui remplace la barre de défilement classique par un personnage animé qui marche le long de la page, transformant ainsi le scroll lui-même en petite interaction
  • L’implémentation actuelle prend la forme d’un bonhomme bâton qui monte et descend selon la position de défilement, dans une expérimentation visant à transformer une barre de défilement ennuyeuse en élément décoratif amusant
  • Parmi les prochains candidats figurent un skateboarder, un rock climber et un squirrel, et d’autres idées de personnages sont également bienvenues
  • Un formulaire d’inscription est proposé pour les personnes qui souhaitent l’appliquer à leur site web
  • L’exemple sur le côté de la page comporte des mouvements qui peuvent être pénibles pour les lecteurs souffrant de vertiges vestibulaires, et il doit être masqué dans la plupart des navigateurs lorsque le réglage reduce motion est activé

Prototype qui transforme la barre de défilement en personnage

  • Scroll Buddy est une expérimentation qui transforme la barre de défilement, non plus en simple élément d’interface, mais en personnage animé qui se déplace le long de la page pendant le scroll
  • Le premier prototype utilise un personnage en bonhomme bâton qui marche de haut en bas lorsque l’utilisateur fait défiler la page
  • Parmi les versions envisagées ensuite, on trouve d’autres formes de Scroll Buddy comme un skateboarder, un rock climber ou un squirrel

Demande d’intégration sur un site web

Précautions d’accessibilité liées au mouvement

  • L’exemple intégré sur le côté de la page comprend des animations et du mouvement
  • Il est recommandé aux lecteurs souffrant de vertiges vestibulaires d’activer la fonction reduce motion de leur appareil avant de regarder l’animation
  • Lorsque le réglage reduce motion est activé, Scroll Buddy doit être masqué dans la plupart des navigateurs

Indices sur l’implémentation et la structure de la page

  • La page comporte un titre de section indiquant qu’il a été créé en simple javascript
  • La majeure partie du texte qui suit est un faux texte lorem ipsum destiné à produire du scroll

À lire aussi

1 commentaires

 
GN⁺ 2025-03-04
Avis sur Hacker News

  • Sympa ! Je ne l’ai pas encore codé, mais j’avais l’idée d’un hamster en parachute
    Il tomberait lentement vers le bas de la page, puis si on fait défiler rapidement il ouvrirait son parachute pour atterrir à nouveau au bas du viewport ; au survol de la souris, il brandirait un panneau « Top » ; au clic, il remonterait avec un jetpack, puis quand l’écran atteint tout en haut, il rouvrirait son parachute pour redescendre en douceur

    • Maintenant j’en ai envie. Je l’imagine un peu ressemblant au gopher du langage Go, mais pas bleu, évidemment
    • J’attends le lien du dépôt. J’ajouterai un fork où, si le hamster défile trop vite, il n’arrive pas à rouvrir son parachute et l’utilisateur « perd »
      Ça aidera peut-être à limiter le scroll ?
    • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
      Avertissement : je n’ai pas écrit une seule ligne moi-même ; j’ai utilisé Claude 3.7 via Kagi assistant et je l’ai fait modifier une dizaine de fois dans une seule conversation. Tout ce que j’ai fait, c’est coller des emojis dans le prompt
      Je n’ai jamais vraiment codé quoi que ce soit de significatif en HTML et JS
      Modification : c’est assez drôle que, dans un endroit où l’on parle autant d’IA, mon premier retour négatif soit arrivé après avoir posté du code généré par IA qui fonctionne. On dirait qu’on préfère détester l’IA plutôt que les hamsters
    • Quand on remonte, ce serait bien d’avoir un hamster à jetpack/fusée

  • Pour ce genre de chose, il me semble correct de le désactiver si l’utilisateur a défini prefers-reduced-motion
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    Il suffit d’ajouter une règle CSS pour masquer le personnage quand c’est approprié :
    @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

    • L’auteur semble l’avoir implémenté. Du coup, les gens comme moi ne voient plus qu’une page lorem ipsum sans intérêt
      Je pense qu’une démo pourrait faire exception à ce genre de filtre, surtout si on n’y arrive que par un lien explicite
      Le même code qui le fait disparaître aurait aussi pu ajouter un message indiquant « pourquoi c’est désactivé ». Dans mon cas, c’est à cause de Apple Menu > System Preferences > Accessibility > Display > Reduce motion ; pour les autres OS, voir https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
      Ce réglage supprime les petites animations de macOS, ce qui donne une impression de plus grande réactivité. Sans ce commentaire, j’aurais pu ignorer pendant des années qu’il affectait aussi les sites web
    • C’est probablement exactement pour ce genre de choses que j’ai activé « réduire les animations », mais cette implémentation-ci est assez inoffensive, donc c’est un peu dommage
    • J’aurais préféré que l’auteur du site ne voie pas ce commentaire. J’ai mis un bon moment à comprendre pourquoi je ne voyais rien dans aucun navigateur
    • Bien vu. Cela devrait maintenant être corrigé pour les utilisateurs qui ont activé ce réglage

  • Pourquoi personne n’a dit qu’il fallait appeler ça Stroll Bar ?

    • Malheureusement, ce nom est déjà pris, donc j’ai acheté scrollbuddy.com et je vais préparer ça pour que les gens puissent bientôt l’implémenter

  • Au lieu d’une barre de défilement ennuyeuse, je me disais qu’il serait amusant d’avoir un bonhomme bâton animé qui marche de haut en bas le long de la page quand on scrolle
    Voici le premier prototype
    Ensuite, je pense faire un skateur, un grimpeur et un écureuil ; quels autres compagnons de scroll faudrait-il créer ?

    • Deux personnes qui pompent une draisine
      Ou bien des gens qui rament sur la poignée de la barre de défilement, avec d’autant plus de rameurs que la poignée est longue
    • J’ai vu une version chenille de ce genre il y a quelques semaines -> https://x.com/trunarla/status/1893705260142657764
    • Très chouette idée. Suggestion : le personnage pourrait semer derrière lui une piste de miettes de pain, puis les ramasser en remontant ou les envoyer hors de l’écran
    • Les deux premières idées pour « innover » là-dessus seraient une voiture qui fonce vers le bas de la page, ou des lumières qui font un compte à rebours façon « full tree », comme un Christmas tree de drag racing
    • Et des gouttes de pluie ? Qui n’a jamais encouragé une course de gouttes de pluie sur la vitre lors d’un long trajet en voiture quand il était enfant ?
      Une pomme qui tombe sur la tête de Newton serait sympa aussi
      Rien que d’y penser, c’est amusant

  • Je suis surpris d’être apparemment le seul à poser la question, mais pourquoi diable cacher la méthode d’implémentation derrière un Google Form ?
    Modification : les détails d’implémentation sont en fait directement accessibles dans le DOM. Pour ceux qui ne veulent pas donner leur e-mail, j’ai créé un gist avec le contenu pertinent extrait :
    https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

    • Je ne comprends pas. Ne pas vouloir écrire un article et le partager, passe encore, mais vouloir collecter des adresses e-mail en échange, c’est vraiment bizarre
    • En l’état, le code sans licence explicite ne peut pas être utilisé. Le code publié n’a pas non plus de licence, mais on peut peut-être l’obtenir en contactant l’auteur
      Utiliser le code lié pourrait constituer une violation du droit d’auteur
    • Il veut être payé pour son travail en attention plutôt qu’en argent. Ça me paraît assez raisonnable

  • Qu’est-ce que je rate ? Dans Firefox comme dans Chrome, je ne vois rien à part la barre de défilement
    Est-ce à cause de mes couleurs de barre de défilement personnalisées ?

    • Tu n’aurais pas activé réduire les animations dans l’OS ? Le réglage est respecté, donc le personnage est désactivé
    • C’est peut-être à cause de ça : https://news.ycombinator.com/item?id=43237747
    • Je ne le vois pas sur Android Firefox ni Android Chrome, mais je le vois sur Windows Chrome
    • Pareil pour moi, rien ne se passe

  • Ça me rappelle la fin des années 90, quand les gens ajoutaient des effets visuels sur leurs sites, comme de la neige qui tombe ou une traînée d’étincelles qui suit la souris

    • Oui, DHTML Zone était l’endroit de référence pour récupérer des effets visuels oniriques qui paralysaient le navigateur de l’utilisateur, histoire de rendre son site web super cool
    • Maintenant, ça peut aussi faire penser à iMessage dans iOS 18. Je viens de faire la mise à niveau, et les nouveaux emojis et effets de texte m’ont donné une vraie vibe années 2000

  • J’aime ce genre de projets parce qu’ils me rappellent l’ancien Internet

    • Même réaction : on dirait que quelqu’un a simplement voulu faire un truc amusant et cool
    • Plus de marquee !
    • Ça ressemble au vieux HN !

  • Pourquoi est-ce derrière un Google Form... ? Il n’y a même pas de capture d’écran de ce à quoi ça ressemble avant qu’ils ne collectent ton adresse e-mail
    C’est bizarre que ce billet soit arrivé en page d’accueil

    • Il suffit de rester sur la page. Ne clique pas sur le lien « Get a scroll buddy for your website »
    • On voit l’aperçu sur la page liée, mais c’est quand même étrange que la méthode d’utilisation ne soit envoyée que par e-mail
    • Pas du tout. J’ai ouvert la page et ça fonctionnait bien
      Tu as peut-être désactivé le CSS, ou manqué l’implémentation à côté de la barre de défilement. Il faut regarder les autres commentaires

  • Amusant et malin
    Si j’étais développeur, je ferais une version où, quand on remonte, le bonhomme bâton recule en faisant le moonwalk

    • Question peut-être un peu bête, mais si tu n’es pas développeur, je suis curieux de savoir comment tu es arrivé sur HN