Entwicklung von Scroll Bar Buddy, der beim Scrollen der Seite folgt

 (focusfurnace.com)
1 Punkte von GN⁺ 2025-03-04 | 1 Kommentare | Auf WhatsApp teilen

  • Einführung in Scroll Buddy

    • Ein Projekt, das der Scrollleiste mit einer animierten Strichfigur auf spielerische Weise mehr Spaß verleiht
    • Beim Scrollen ist eine Strichfigur zu sehen, die sich seitlich neben der Seite nach oben und unten bewegt
    • Künftig sind verschiedene Versionen geplant, darunter ein Skateboarder, ein Kletterer und ein Eichhörnchen

  • Hinweise

    • Die auf der Seite eingebundene Beispielanimation kann bei einigen Leserinnen und Lesern Probleme verursachen
    • Leserinnen und Leser mit vestibulären Bewegungsstörungen sollten vor dem Ansehen der Animation auf ihrem Gerät die Funktion zur Reduzierung von Bewegungen aktivieren
    • Wenn die Einstellung zur Bewegungsreduzierung aktiviert ist, wird Scroll Buddy in den meisten Browsern ausgeblendet

  • Weitere Informationen

    • Dieses Projekt wurde mit einfachem JavaScript erstellt
    • Gesucht werden Ideen, wie sich die Scrollleiste noch interessanter gestalten lässt

  • Sonstiges

    • Der restliche Text ist Dummy-Text zum Scrollen und hat keinen Bezug zum eigentlichen Inhalt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-03-04
Hacker-News-Kommentare
  • Lustig. Ich hatte eine nicht umgesetzte Idee dafür: Im Grunde ein Hamster mit Fallschirm, der langsam zum unteren Ende der Seite hinabfällt
    • Wenn man schnell scrollt, öffnet sich der Fallschirm und er landet wieder am unteren Rand des Viewports
    • Beim Darüberfahren mit der Maus hält er ein "Top"-Schild hoch, und beim Klicken fliegt er mit einem Jetpack los; sobald der Bildschirm wieder ganz oben angekommen ist, öffnet er erneut den Fallschirm und landet sanft unten auf dem Bildschirm
  • Ich frage mich, warum das niemand "Stroll Bar" genannt hat
  • So etwas sollte deaktiviert werden, wenn Nutzer prefers-reduced-motion eingestellt haben
    • Dafür ist eine zusätzliche CSS-Regel nötig
    • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
  • Statt einer langweiligen Scrollbar wäre es lustig, wenn neben der Seite eine animierte Strichfigur auf und ab läuft
    • Ich habe einen ersten Prototyp gebaut
    • Als Nächstes werde ich einen Skateboarder, einen Kletterer und ein Eichhörnchen machen
    • Ich frage mich, was man noch als weitere Scroll-Buddys machen könnte
  • Ich frage mich, warum die Implementierung hinter einem Google-Formular versteckt wird
    • Die Implementierungsdetails sind im DOM leicht zugänglich
    • Ich habe ein Gist geteilt, mit dem sich die relevanten Details auch ohne Angabe einer E-Mail-Adresse extrahieren lassen
  • Ich frage mich, warum das hinter einem Google-Formular steckt. Es gibt nicht einmal einen Screenshot davon, wie es aussieht, bevor man seine E-Mail-Adresse angibt. Seltsamer Beitrag auf der Startseite
  • Das erinnert mich an die späten 90er, als Leute Schneeeffekte oder Flammen, die der Maus folgen, zu Websites hinzugefügt haben
  • Ich weiß nicht, was ich übersehe. In Firefox und Chrome sehe ich außer der Scrollbar selbst nichts. Ich frage mich, ob benutzerdefinierte Scrollbar-Farben damit zu tun haben
  • Solche Projekte erinnern mich an das alte Internet. Gefällt mir
  • Das hebt hervor, wie nutzlos und schwer benutzbar die vorhandene Scrollbar ist
    • Mir gefiel die Funktion, mit der man leicht sehen konnte, wo man auf der Seite war. Hat auch Humor. Gefällt mir