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

 (focusfurnace.com)
1 points par GN⁺ 2025-03-04 | 1 commentaires | Partager sur WhatsApp

  • Présentation de Scroll Buddy

    • Il s’agit d’un projet qui ajoute un stickman animé pour rendre la barre de défilement plus amusante
    • Lors du défilement, on peut voir ce stickman se déplacer de haut en bas sur le côté de la page
    • D’autres versions sont prévues à l’avenir, notamment un skateur, un grimpeur et un écureuil

  • Points d’attention

    • L’animation d’exemple présente sur le côté de la page peut poser problème à certains lecteurs
    • Il est recommandé aux lecteurs souffrant de troubles vestibulaires d’activer la fonction de réduction des mouvements sur leur appareil avant de regarder l’animation
    • Si le réglage de réduction des mouvements est activé, Scroll Buddy est masqué dans la plupart des navigateurs

  • Autres informations

    • Ce projet a été réalisé avec un JavaScript simple
    • L’auteur est ouvert aux idées pour rendre la barre de défilement encore plus intéressante

  • Autre contenu

    • Le reste du texte est un faux texte destiné au défilement et n’a aucun lien avec le contenu réel

À lire aussi

1 commentaires

 
GN⁺ 2025-03-04
Avis Hacker News
  • Amusant. J’avais une idée non codée : en gros, un hamster avec un parachute qui descend lentement vers le bas de la page
    • Si on fait défiler rapidement, le parachute s’ouvre et il réatterrit en bas du viewport
    • Au survol, il brandit un panneau « Top » et, au clic, il décolle avec un jetpack ; quand l’écran atteint de nouveau le haut, il rouvre son parachute et atterrit en douceur en bas de l’écran
  • Je me demande pourquoi personne n’a appelé ça « Stroll Bar »
  • Il faudrait désactiver ce genre de fonctionnalité quand l’utilisateur a activé le réglage prefers-reduced-motion
    • Il faut une règle CSS supplémentaire
    • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
  • Ce serait amusant d’avoir, au lieu d’une barre de défilement ennuyeuse, un personnage bâton animé qui marche de haut en bas le long de la page
    • J’ai créé un premier prototype
    • Ensuite, je vais faire un skateur, un grimpeur et un écureuil
    • Je me demande quels autres compagnons de scroll il serait sympa de créer
  • Je me demande pourquoi l’implémentation est cachée derrière un Google Form
    • Les détails d’implémentation sont facilement accessibles dans le DOM
    • J’ai partagé un gist qui permet d’extraire les détails pertinents sans fournir d’adresse e-mail
  • Je me demande pourquoi c’est derrière un Google Form. Il n’y a même pas de capture d’écran de l’apparence avant de collecter les adresses e-mail. Étrange de voir ce post en page principale
  • Ça me rappelle la fin des années 90, quand les gens ajoutaient à leurs sites web des yeux ou des effets de flammes qui suivaient la souris
  • Je ne vois pas ce que je rate. Dans Firefox et Chrome, je ne vois rien d’autre que la barre de défilement elle-même. Je me demande si une couleur de barre de défilement personnalisée y est pour quelque chose
  • Des projets comme celui-ci me rappellent l’ancien Internet. J’aime bien
  • Ça met en évidence à quel point les barres de défilement existantes sont peu utiles et difficiles à utiliser
    • J’ai apprécié la possibilité de voir facilement où on en était sur la page. Et il y a de l’humour aussi. J’aime bien