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

• Scroll Buddy ist ein erster Prototyp, der die herkömmliche Scrollbar durch einen animierten Charakter ersetzt, der neben der Seite entlangläuft, und das Scrollen selbst zu einer kleinen Interaktion macht
• Die aktuelle Umsetzung ist eine Strichmännchen-Figur, die sich entsprechend der Scroll-Position nach oben und unten bewegt, als Experiment, um eine langweilige Scrollbar in ein unterhaltsames dekoratives Element zu verwandeln
• Als nächste Kandidaten wurden skateboarder, rock climber und squirrel vorgeschlagen, weitere Charakterideen sind ebenfalls willkommen
• Für Nutzer, die es auf ihrer Website einsetzen möchten, wird ein Anmeldeformular angeboten
• Das Seitenbeispiel kann aufgrund seiner Bewegung für Leser mit vestibulärer Bewegungsübelkeit belastend sein und sollte in den meisten Browsern ausgeblendet werden, wenn reduce motion aktiviert ist

---

Prototyp, der die Scrollbar in einen Charakter verwandelt

• Scroll Buddy ist ein Experiment, das die Scrollbar nicht nur als einfaches UI-Element behandelt, sondern sie in einen animierten Charakter verwandelt, der beim Scrollen neben der Seite entlangläuft
• Der erste Prototyp verwendet eine Strichmännchen-Figur, die auf und ab geht, wenn der Nutzer scrollt
• Als Kandidaten für spätere Versionen gibt es andere Formen von Scroll Buddy wie skateboarder, rock climber und squirrel

Bewerbung für den Einsatz auf Websites

• Es wird ein Bewerbungslink für Nutzer bereitgestellt, die Scroll Buddy auf ihrer Website einbauen möchten
• Get a scroll buddy for your website

Hinweise zur Barrierefreiheit bei Bewegung

• Das eingebettete Beispiel am Seitenrand enthält Animationen und Bewegung
• Lesern mit vestibulärer Bewegungsübelkeit wird empfohlen, vor dem Ansehen der Animation die reduce motion-Funktion ihres Geräts zu aktivieren
• Wenn die reduce motion-Einstellung aktiviert ist, sollte Scroll Buddy in den meisten Browsern ausgeblendet werden

Hinweise zur Umsetzung und zum Seitenaufbau

• Auf der Seite gibt es eine Abschnittsüberschrift, dass sie mit simple javascript erstellt wurde
• Der Großteil des weiteren Inhalts besteht aus Lorem-Ipsum-Platzhaltertext, um das Scrollen zu erzeugen

[GN⁺]

Meinungen auf Hacker News

• Schön! Ich habe es noch nicht in Code umgesetzt, aber ich hatte die Idee eines Hamsters mit Fallschirm.
  Er würde langsam die Seite hinunterfallen, bei schnellem Scrollen den Fallschirm öffnen, wieder am unteren Rand des Viewports landen, beim Darüberfahren mit der Maus ein „Top“-Schild hochhalten und beim Klicken mit einem Jetpack nach oben fliegen; wenn der Bildschirm ganz oben ankommt, öffnet er wieder den Fallschirm und gleitet sanft nach unten.

  • Jetzt will ich das haben. Irgendwie stelle ich mir vor, dass der Hamster dem Gopher aus der Go-Sprache ähnelt, nur natürlich nicht blau.
  • Ich warte auf den Repository-Link. Ich würde einen Fork hinzufügen, bei dem der Hamster seinen Fallschirm nicht rechtzeitig wieder öffnen kann, wenn man zu schnell scrollt, sodass der Nutzer „verliert“.
    Vielleicht hilft das ja, das Scrollen einzudämmen?
  • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
    Disclaimer: Ich habe keine einzige Zeile selbst geschrieben, sondern Claude 3.7 als Kagi Assistant verwendet und es in einer Unterhaltung ungefähr zehnmal überarbeiten lassen. Alles, was ich getan habe, war im Wesentlichen, Emojis in den Prompt einzufügen.
    Ich habe noch nie etwas Sinnvolles in HTML und JS programmiert.
    Edit: Es ist schon lustig, dass ich an einem Ort, an dem so viel über KI gesprochen wird, funktionierenden KI-generierten Code gepostet habe und mein erster Vote ein Downvote war. Offenbar mögen die Leute KI-Hass mehr als Hamster.
  • Beim Scrollen nach oben wäre ein Jetpack-/Raketen-Hamster schön.

• So etwas sollte wohl deaktiviert werden, wenn der Nutzer prefers-reduced-motion gesetzt hat.
  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  Um die Figur bei Bedarf auszublenden, reicht eine einzige CSS-Regel:
  @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

  • Der Autor scheint das implementiert zu haben. Jetzt sehe ich als jemand wie ich nur noch eine sinnlose lorem-ipsum-Seite.
    Ich finde, Demos dürfen bei solchen Filtern eine Ausnahme sein, besonders wenn man nur über einen klaren Link dorthin gelangt.
    Derselbe Code, der es verschwinden lässt, hätte auch einen Hinweistext hinzufügen können, „warum es deaktiviert wurde“. In meinem Fall liegt es an Apple-Menü > Systemeinstellungen > Bedienungshilfen > Anzeige > Bewegung reduzieren; für andere Betriebssysteme siehe https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref....
    Diese Einstellung entfernt kleine Animationen in macOS und lässt es dadurch flotter wirken. Ohne diesen Kommentar hätte ich jahrelang nicht gewusst, dass sie sich auch auf Websites auswirkt.
  • Wahrscheinlich ist genau so etwas der Grund, warum ich „Bewegung reduzieren“ aktiviert habe, aber diese Umsetzung ist ziemlich harmlos, daher ist es etwas schade.
  • Ich wünschte, der Site-Autor hätte diesen Kommentar nicht gesehen. Ich habe eine ganze Weile gebraucht, um zu verstehen, warum ich es in keinem Browser sehe.
  • Guter Hinweis. Für Nutzer mit dieser Einstellung sollte es jetzt behoben sein.

• Warum hat noch niemand gesagt, dass man das Stroll Bar nennen sollte?

  • Leider ist dieser Name schon vergeben, deshalb habe ich scrollbuddy.com gekauft und werde es so vorbereiten, dass Leute es bald einbauen können.

• Statt einer langweiligen Scrollbar dachte ich, es wäre lustig, ein animiertes Strichmännchen zu haben, das beim Scrollen am Seitenrand auf und ab läuft.
  Das ist der erste Prototyp.
  Als Nächstes möchte ich einen Skateboarder, einen Kletterer und ein Eichhörnchen bauen; welche Scroll-Freunde sollte ich sonst noch machen?

  • Zwei Leute, die eine Draisine pumpen.
    Oder Leute, die am Scrollbar-Griff rudern, wobei bei einem längeren Griff mehr Ruderer dazukommen.
  • Vor ein paar Wochen habe ich eine Raupen-Version davon gesehen -> https://x.com/trunarla/status/1893705260142657764
  • Sehr coole Idee. Als Vorschlag: Die Figur könnte hinter sich eine Brotkrümelspur verstreuen und sie beim Hochgehen wieder einsammeln oder aus dem Bildschirm kicken.
  • Meine ersten beiden Ideen, um das zu „innovieren“, waren ein Auto, das die Seite hinunterfährt, oder Lichter, die wie ein Drag-Racing-Christmas-Tree im „Full Tree“-Modus herunterzählen.
  • Wie wäre es mit Regentropfen? Hat als Kind nie jemand bei langen Autofahrten Regentropfen-Rennen angefeuert?
    Ein Apfel, der Newton auf den Kopf fällt, wäre auch gut.
    Schon das Nachdenken darüber macht Spaß.

• Ich bin überrascht, dass ich offenbar der Einzige bin, der das fragen will: Warum zum Teufel ist die Implementierung hinter einem Google Form versteckt?
  Edit: Die Implementierungsdetails sind tatsächlich direkt im DOM zugänglich. Für alle, die ihre E-Mail-Adresse nicht hergeben möchten, habe ich ein Gist mit den relevanten Inhalten erstellt:
  https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

  • Ich verstehe es nicht. Einen Artikel zu schreiben und ihn nicht teilen zu wollen, ist eine Sache, aber dafür als Gegenleistung E-Mail-Adressen zu sammeln, ist sehr seltsam.
  • In seinem aktuellen Zustand kann Code ohne explizite Lizenz nicht verwendet werden. Auch der gepostete Code hat keine Lizenz, aber vielleicht bekommt man sie, wenn man den Autor kontaktiert.
    Die Nutzung des verlinkten Codes könnte eine Urheberrechtsverletzung sein.
  • Er will für seine Arbeit nicht mit Geld, sondern mit Aufmerksamkeit bezahlt werden. Das wirkt ziemlich vernünftig.

• Was übersehe ich? Sowohl in Firefox als auch in Chrome sehe ich außer der Scrollbar nichts.
  Liegt das an meinen benutzerdefinierten Scrollbar-Farben?

  • Hast du auf Betriebssystemebene vielleicht Bewegung reduzieren aktiviert? Aus Respekt vor dieser Einstellung wird die Figur deaktiviert.
  • Vielleicht liegt es auch daran: https://news.ycombinator.com/item?id=43237747
  • Unter Android Firefox und Android Chrome sehe ich es nicht, unter Windows Chrome schon.
  • Bei mir genauso, es passiert nichts.

• Das erinnert mich an die späten 90er, als Leute visuelle Effekte wie Schneefall auf Websites oder eine Flammenspur, die der Maus folgte, eingebaut haben.

  • Genau, DHTML Zone war damals die Anlaufstelle für traumhafte visuelle Effekte, die den Browser des Nutzers lahmlegten. Damit die Website supercool aussah.
  • Heute kann man auch an iMessage in iOS 18 denken. Ich habe gerade aktualisiert, und die neuen Emoji- und Texteffekte versprühen 2000er-Vibes.

• Solche Projekte mag ich, weil sie an das alte Internet erinnern.

  • Ich hatte dieselbe Reaktion; es wirkt, als hätte jemand einfach aus Spaß etwas Cooles ausprobieren wollen.
  • Mehr marquees!
  • Wie das alte HN!

• Warum steckt das hinter einem Google Form...? Nicht einmal einen Screenshot davon, wie es aussieht, bevor E-Mail-Adressen eingesammelt werden.
  Seltsam, dass so ein Beitrag auf die Frontpage kommt.

  • Bleib einfach auf der Seite. Du musst nicht auf den Link „Get a scroll buddy for your website“ klicken.
  • Auf der verlinkten Seite sieht man eine Vorschau, aber dass man die Anleitung trotzdem nur per E-Mail bekommen kann, ist seltsam.
  • Stimmt nicht. Ich habe die Seite geöffnet und es hat gut funktioniert.
    Vielleicht hast du CSS deaktiviert oder die Umsetzung neben der Scrollbar übersehen. Schau dir die anderen Kommentare an.

• Lustig und clever.
  Wenn ich Entwickler wäre, würde ich eine Version bauen, bei der das Strichmännchen beim Hochscrollen rückwärts läuft und den Moonwalk macht.

  • Vielleicht eine etwas dumme Frage, aber wenn du kein Entwickler bist: Wie bist du dann auf HN gelandet?