Desarrollo de Scroll Bar Buddy, una barra de desplazamiento que baja siguiendo la página

• Scroll Buddy es el primer prototipo que reemplaza la barra de desplazamiento tradicional por un personaje animado que camina junto a la página, convirtiendo el desplazamiento en una pequeña interacción
• La implementación actual tiene forma de muñeco de palo que se mueve hacia arriba y abajo según la posición del scroll, como un experimento para transformar una barra de desplazamiento aburrida en un elemento decorativo divertido
• Como siguientes opciones se propusieron un skateboarder, un escalador de roca y una ardilla, y también están recibiendo otras ideas de personajes
• Se ofrece un formulario de solicitud para quienes quieran aplicarlo en su sitio web
• El ejemplo lateral de la página incluye movimiento y podría resultar molesto para lectores con vértigo vestibular, y debería ocultarse en la mayoría de los navegadores cuando la opción de reduce motion esté activada

---

Prototipo que convierte la barra de desplazamiento en un personaje

• Scroll Buddy es un experimento que transforma la barra de desplazamiento de un simple elemento de UI en un personaje animado que se mueve junto al lado de la página mientras se hace scroll
• El primer prototipo usa un personaje de muñeco de palo que camina hacia arriba y abajo cuando el usuario se desplaza
• Entre los candidatos para versiones posteriores están skateboarder, rock climber y squirrel como otras formas de Scroll Buddy

Solicitud para implementarlo en un sitio web

• Se ofrece un enlace de solicitud para quienes quieran poner Scroll Buddy en su sitio web
• Get a scroll buddy for your website

Advertencia de accesibilidad sobre el movimiento

• El ejemplo incrustado al costado de la página incluye animación y movimiento
• Se recomienda que los lectores con vértigo vestibular activen la función de reduce motion de su dispositivo antes de ver la animación
• Si la opción de reduce motion está activada, Scroll Buddy debería ocultarse en la mayoría de los navegadores

Pistas sobre la implementación y la estructura de la página

• La página tiene un título de sección que dice que fue hecha con simple javascript
• Después de eso, la mayor parte del contenido es texto de relleno lorem ipsum para generar desplazamiento

[GN⁺]

Comentarios en Hacker News

• ¡Está buenísimo! Aún no lo hice en código, pero tenía una idea de un hámster con paracaídas
  Va cayendo lentamente hacia abajo de la página, pero si haces scroll rápido abre el paracaídas para volver a aterrizar en la parte inferior del viewport; si pasas el mouse encima, sostiene un letrero que dice “Top”; y si haces clic, sale volando hacia arriba con un jetpack y, cuando la pantalla vuelve a llegar arriba del todo, abre otra vez el paracaídas para bajar suavemente

  • Ahora resulta que lo quiero. Siento que el hámster se parecería al gopher de Go, aunque claro, no sería azul
  • Esperando el link del repositorio. Voy a agregar un fork donde, si el hámster hace scroll demasiado rápido, ya no alcanza a volver a abrir el paracaídas y el usuario “pierde”
    ¿Capaz hasta ayuda a moderar el scroll?
  • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
    Descargo de responsabilidad: no escribí ni una sola línea yo mismo; usé Claude 3.7 con Kagi assistant y lo fui ajustando unas 10 veces dentro de una sola conversación. Básicamente lo único que hice fue pegar emojis en el prompt
    Nunca había programado nada significativo en HTML y JS
    Edit: es medio gracioso que, en un lugar donde se habla tanto de IA, haya pegado código generado por IA que funciona y lo primero que recibí fueron votos negativos. Parece que gustan más los que odian la IA que los hámsters
  • Cuando haces scroll hacia arriba estaría bueno que apareciera un hámster con jetpack/cohete

• Esto parece el tipo de cosa que debería desactivarse si el usuario tiene configurado prefers-reduced-motion
  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  Para ocultar el personaje cuando corresponda solo hace falta una regla CSS:
  @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

  • Parece que el autor sí lo implementó. Ahora la gente como yo solo ve una página sin sentido de lorem ipsum
    Yo diría que una demo puede ser una excepción a este filtro, sobre todo si solo se puede entrar por un enlace explícito
    El mismo código que lo hace desaparecer también podría haber agregado un mensaje indicando “por qué está desactivado”. En mi caso fue por Apple Menu > System Preferences > Accessibility > Display > Reduce motion, y para otros OS ver https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    Esta opción hace que las pequeñas animaciones de macOS desaparezcan y se sienta más ágil. Si no fuera por este comentario, podría haber pasado años sin saber que también afectaba a los sitios web
  • Probablemente este sea exactamente el tipo de cosa por la que tengo activado “reducir movimiento”, aunque esta implementación en particular es bastante inocua, así que da un poco de pena
  • Ojalá el autor del sitio no hubiera visto este comentario. Me tomó un buen rato entender por qué no veía nada en ningún navegador
  • Bien visto. Ahora debería estar corregido para los usuarios que tienen esa configuración activada

• ¿Por qué nadie dijo que esto debería llamarse Stroll Bar?

  • Lamentablemente ese nombre ya estaba en uso, así que compré scrollbuddy.com y pienso dejarlo listo para que la gente pueda implementarlo pronto

• En vez de una scrollbar aburrida, siempre pensé que sería divertido tener un muñeco animado caminando hacia arriba y abajo al costado de la página mientras haces scroll
  Este es el primer prototipo
  Luego quiero hacer un skater, un escalador y una ardilla; ¿qué otro buddy para scroll estaría bueno hacer?

  • Dos personas bombeando una vagoneta de palanca
    O gente remando la barra del scroll, con más remeros cuanto más largo sea el control
  • Hace unas semanas vi una versión de oruga de esto -> https://x.com/trunarla/status/1893705260142657764
  • Es una idea buenísima. Como sugerencia, estaría bueno que el personaje dejara un rastro de migas de pan detrás y que, al subir, las fuera recogiendo otra vez o las pateara fuera de la pantalla
  • Las primeras dos ideas que se me ocurrieron para “innovar” esto fueron un auto corriendo hacia abajo de la página, o luces haciendo una cuenta regresiva en modo “full tree”, como un árbol de Navidad de drag racing
  • ¿Qué tal gotas de lluvia? ¿Nadie alentó nunca una carrera de gotas de lluvia desde el auto cuando era chico?
    También estaría buena una manzana cayéndole a Newton en la cabeza
    Solo pensarlo ya da risa

• Me sorprende ser aparentemente el único que iba a preguntar esto, pero ¿por qué demonios ocultaron la implementación detrás de un Google Form?
  Edit: en realidad se puede acceder directamente a los detalles de implementación desde el DOM. Para quienes no quieran dar su email, hice un gist con el contenido relevante extraído:
  https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

  • No lo entiendo. Está bien si escribes algo y no quieres compartirlo, pero querer recolectar direcciones de correo a cambio de darlo es rarísimo
  • En su estado actual no se puede usar código sin una licencia explícita. El código publicado tampoco tiene licencia, pero tal vez te la den si contactas al autor
    Usar el código enlazado podría ser infracción de copyright
  • Está buscando recibir algo a cambio de su trabajo, no dinero sino atención. Me parece bastante razonable

• ¿Qué me estoy perdiendo? Tanto en Firefox como en Chrome no veo nada aparte de la scrollbar
  ¿Será por mis colores personalizados de scrollbar?

  • ¿No tendrás activado reducir movimiento en el sistema? Esa configuración se respeta y desactiva el personaje
  • Quizás también sea por esto: https://news.ycombinator.com/item?id=43237747
  • En Android Firefox y Android Chrome no aparece, en Windows Chrome sí
  • A mí igual, no pasa nada

• Me hace pensar en fines de los 90, cuando la gente llenaba los sitios web de efectos visuales como nieve cayendo o colas de fuego que seguían al cursor

  • Sí, DHTML Zone era el lugar clásico para sacar efectos visuales alucinados que dejaban muerto el navegador del usuario. Todo para que el sitio se viera increíblemente cool
  • Ahora también me hace pensar en iMessage de iOS 18. Acabo de actualizar y los nuevos emojis y efectos de texto me dieron una vibra muy de los 2000

• Me encantan estos proyectos porque recuerdan al internet de antes

  • Me dio la misma impresión, como si alguien simplemente hubiera querido hacer algo divertido y cool
  • ¡Más marquee!
  • ¡Se siente como el HN de antes!

• ¿Por qué está esto detrás de un Google Form...? Ni siquiera hay una captura de pantalla de cómo se ve antes de pedirte el correo
  Qué raro que un post así haya llegado a portada

  • Solo hay que quedarse en la página. No hace falta hacer clic en “Get a scroll buddy for your website”
  • En la página enlazada sí se ve una vista previa, pero aun así es raro que las instrucciones de uso solo lleguen por email
  • No es así. Abrí la página y funcionó perfectamente
    Quizás desactivaste el CSS o no viste la implementación al lado de la scrollbar. Revisa los otros comentarios

• Divertido e ingenioso
  Si yo fuera el desarrollador, haría una versión donde, al hacer scroll hacia arriba, el muñeco se mueve hacia atrás haciendo moonwalk

  • Puede que sea una pregunta medio tonta, pero me da curiosidad: si no eres desarrollador, ¿cómo llegaste a HN?