Desarrollo de Scroll Bar Buddy, una barra de desplazamiento que baja junto con la página al hacer scroll

• Introducción a Scroll Buddy

  • Es un proyecto que agrega una figura animada tipo stick para hacer más divertida la barra de desplazamiento
  • Al hacer scroll, se puede ver una figura stick moviéndose hacia arriba y abajo al lado de la página
  • En el futuro se planean varias versiones, como un skater, un escalador y una ardilla

• Precauciones

  • La animación de ejemplo incluida en el costado de la página puede causar problemas a algunos lectores
  • Se recomienda que los lectores con trastornos vestibulares activen la función de reducción de movimiento en su dispositivo antes de ver la animación
  • Si la configuración de reducción de movimiento está activada, Scroll Buddy se oculta en la mayoría de los navegadores

• Información adicional

  • Este proyecto fue hecho con JavaScript sencillo
  • Se están recibiendo ideas para hacer la barra de desplazamiento aún más interesante

• Otros detalles

  • El resto del texto es texto de relleno para el scroll y no está relacionado con el contenido real

[GN⁺]

Comentarios de Hacker News

• Está divertido. Tenía una idea sin programar. Básicamente era un hámster con paracaídas que cae lentamente hacia la parte inferior de la página
  • Si haces scroll rápido, abre el paracaídas y vuelve a aterrizar en la parte inferior del viewport
  • Al pasar el cursor, levanta un letrero que dice "Top" y, al hacer clic, sale volando con un jetpack; cuando la pantalla llega a la parte superior, vuelve a abrir el paracaídas y aterriza suavemente en la parte inferior de la pantalla
• Me pregunto por qué nadie llamó a esto "Stroll Bar"
• Esto debería desactivarse cuando el usuario tenga configurado prefers-reduced-motion
  • Se necesita una regla CSS adicional
  • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
• Sería divertido tener una figura de palitos animada caminando arriba y abajo al lado de la página en vez de una barra de desplazamiento aburrida
  • Hice el primer prototipo
  • Después planeo hacer un skater, un escalador y una ardilla
  • Me pregunto qué más sería bueno hacer como otro compañero de scroll
• Me pregunto por qué esconden la implementación detrás de un Google Form
  • Los detalles de implementación son fácilmente accesibles desde el DOM
  • Compartí un gist que permite extraer los detalles relacionados sin dar un correo electrónico
• Me pregunto por qué está detrás de un Google Form. Ni siquiera hay una captura de pantalla de cómo se ve antes de recopilar direcciones de correo. Qué publicación tan rara para llegar a la portada
• Me recuerda a finales de los 90, cuando la gente añadía ojos a los sitios web o efectos de fuego que seguían al mouse
• No sé qué me estoy perdiendo. En Firefox y Chrome no veo nada aparte de la propia barra de desplazamiento. Me pregunto si tiene que ver con el color personalizado de la barra de desplazamiento del usuario
• Proyectos así me recuerdan al internet de antes. Me gusta
• Esto resalta lo inútil y difícil de usar que es la barra de desplazamiento existente
  • Me gustó la función que te permitía ver fácilmente en qué parte de la página estabas. También tiene humor. Me gusta