Made a scroll bar buddy that walks down the page when you scroll

I love this. I miss lighthearted things like this being more of the norm than the exception. Xeyes on 90s Linux, cowsay, whatever that was that made snow gather on top your windows (Xsnow?). Heck, I even have fond memories of Björks website having an animated bee that would follow you around. I think he was named Meesta Bee or something similar.

Everything is so dang serious all the time, I miss the sense of levity and wonder that used to follow tech around.

Nice! I had an idea that I never coded up. Basically a hamster with a parachute that would fall slowly to the bottom of the page. If you scroll down fast his parachute will deploy to catch up and land once again at the bottom of the viewport. He'll hold a "Top" sign when you hover over him and will shoot off with a jetpack when you click on him and as the screen hits the top you'll see him deploy a parachute again to gently land at the bottom of the screen.

This kind of thing should probably be disabled if the user has prefers-reduced-motion set.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

It just needs one extra CSS rule to make the guy invisible when appropriate:

  @media (prefers-reduced-motion) {
    #scrollBuddy {
      visibility: hidden;
    }
  }

Why is this behind a google form...? There isn't even a screenshot of what it looks like before collecting an email address. What a strange post to hit front page.

Instead of a boring scrollbar thought it would be fun to have an animated stick figure that walks up and down the side of your page when you scroll.

This is the first prototype i made.

Going to make a skateboarder, rock climber, or squirrel next. what other kinds of scroll buddies should I make?

Surprised I seem to be the only one willing to ask; _why in the world would you wall the implementation behind a Google Form?_

Edit: Implementation details are actually readily accessible in the DOM. Here's a gist that extracts the relevant details (for those who, understandably, don't want to give out their email in exchange):

https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

This highlights just how useless and unusable existing scroll bars are.

The ability to easily see where you were on the page was great. And it's got some humour. I love it.

I tried it in 3 browsers but dont see anything in anyone of them.

I am not sure about walking on a moving thing. I would like to see a kind of surfboard action, balancing only when it moves.

Over to you!

Reminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.

What am I missing? I don't see anything except the scroll bar itself, on both Firefox and Chrome. Do my custom scroll bar colors have something to do with it?

This sort of project reminds me of the old internet. I love it.

Would be cool if you could play one sided pong with the scrollbar and bounce a ball around the window.

This is funny and clever.

If I were a developer, I would make a version where, when the stick figure moves backward as you scroll up, it does the moonwalk.

This is nice. It reminds me of old Windows desktop pets: https://www.youtube.com/watch?v=CosQ1n7k6lw

I made a simple javascript by copying your code so that I can add this cute guy on my website, please let me know if this is not OK (https://github.com/jwenjian/scroll-buddy)

Anybody remember Comet Cursor?[1]

[1] https://en.wikipedia.org/wiki/Comet_Cursor

It doesn't render for me on any of these:

- Chrome on Windows 11

- Firefox on Windows 11

- Chrome on Android

- Firefox on Android

Also no JS errors on console.

Maybe I'm doing something wrong?

I tried in both Ultrawide and traditional FullHD screens.

Haha, this is great fun. Scratching my own itch and making him turnaround when you scroll up:

  /* Add style */
  #scrollBuddy.walkUp {
    transform: rotate(-90deg) scaleX(-1);
  }

  /* Amend script */
  var lastTop = 0;
  function updateBuddyVerticalPosition(scrollPosition) {
    // All as before but add the below before requestAnimationFrame
    if (lastTop <= newTop && buddy.classList.contains('walkUp')) {
      buddy.classList.remove('walkUp')
    } else if (lastTop > newTop) {
      buddy.classList.add('walkUp')
    }
    lastTop = newTop;
  }

Finally a useful piece of software that doesn't require a monthly subscription. Count me in.

cool screenmate could definitely be added as a userscript like https://greasyfork.org/en/scripts/465955-oneko-webmate

The act of scrolling is only noticeable by the browser + Javascript per whatever cycle it's on; it's not always watched except for at certain checkpoints.

To more accurately be affected by quick scrolls, save the last known y-axis value and compare to the current y-axis value. Act accordingly!

Sisyphus when using infinite scroll?

Ooh, how novel, and we'll-executed. I imagine this might be useful in conjunction with a minimap as "terrain".

Useful, that is, in terms of getting a proprioceptive "feel" for the anatomy/topography of a document.

Nice, I'm not sure if someone already suggested, reverse the toe direction when scrolling up.

love this. would also love to see the direction of scroll and scroll speed reflected in character's behavior, ie walking up or down and walking vs running respectively.

I often wonder why corporate engagements (advertisements) aren't wrapped in something like this. people are always looking for distractions even while they're in the middle of a distraction so a fun interaction that starts out by getting your attention like this would seem to make sense. anyway, this is cool

It looks wrong when scrolling up. The direction of the feet makes it look like walking backwards in a very strange way.

I don't see anything in Firefox on Windows. I tried adding `ui.prefersReducedMotion` setting as FALSE, nothing.

Can you make him moonwalk when you scroll up?

This is awesome, thanks for sharing it. I love how creative/random it is, a real gem imo!

Please change the direction of walking when scrolling up. Right now the stick figure is walking backwards. It could be reversed or perhaps made to seem like backtracking (add a little more “caution”, “fear”, etc.).

I remember when scrollbars were just visible all the time, everywhere you went, no special support needed

This is oddly delightful :)

Super cool. The next way is to implement a Breakout game sideways which you can control by scrolling up and down :-)

But you can't grab him and move him (to scroll past large chunks).

Would be cool if you make him run when the scroll becomes faster

I suspect either OP wasn't using the internet in 2001,or they were using the internet in 2001.

I hope to see a % scrolled please :)

Didn't seem to animate on Firefox android.

Also it was invisible with Dark Reader.

Now combine it with elevatorjs:

https://tholman.com/elevator.js/

why should I give you my email to get this?

Can he turn around when you scroll back up?

This is awesome.

Fun! He’s a great speed walker too

It's very cute!

Really cool thank for sharing! I tweaked the code a bit so that I could get Mario sliding down the flag pole for my gaming website. https://www.gamedrop.gg/

Need some sort of dancing gif, maybe user upload. Should fully stop / reset position when not scrolling. Also someone make AI bonzai buddy.

I like it, quickly tried to scroll back looking for the moonwalk, lol

amazing!

Speaking of how the guy starts out on one side of the scrollbar and “walks” to the other, a decade ago I programmed a “scroller” js tool (behavior) that I could add to any element. It basically made it so that when I pressed a trigger with my finger, a menu would appear under it, and then I could move the finger without lifting it until I reached the item I want and release. The memu would scroll under my finger, so that if I reached the bottom (minus a margin) it would already be scrolled all the way to the bottom. Same kind of math as the guy here.

I was tired of having to tap, then scroll, then tap again, on phones. Yes, I really made sure that mode worked too, but the “hidden mode” was to get the selection done in one swipe! Just like I could always do on a Mac, in one mouse swipe!

For mouse interaction - you didn’t even need to press, move and release. You’d hover over the trigger element and then move your mouse down, then click. In that case the menu would disppear if you moved the pointer out of it.

You don’t have to imagine, just try the Developer menu on https://Qbix.com for instance (the menu isn’t long enough but try turning your phone horizontally to make vertical space more limited.. or the tech savvy among you can use Safari debugger to copypaste some more menu items into that menu).

By the way, I now have dozens or hundreds of such “tools” I use to create interfaces. Menus. Dialogs. Tooltips. Onboarding Hints. Speech. Tabs. Chatrooms. Live videoconferencing. Peer to peer broadcast that’s uncensorable. Ok that escalated fast :) https://intercoin.app as an example.

[dead]

[dead]

[dead]

Sorry, but I find this incredibly distracting and unpleasant to me. Yanks my focus every time I scroll. Any site using it is an instant back button for me.