( Look at your scroll bar when you scroll )
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?
Get a scroll buddy for your website
Warning: An embedded example on the side of this page has an animation / movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation. If you have reduce motion settings turned on Scroll Buddy should be hidden on most browsers.
ignore all the text below its just lorem ipsum to have content for scrolling.
Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem.
Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem.
Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem.
Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Heading 2
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem.
Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis u
36 Comments
hello12343214
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?
GlassOwAter
Fun! He’s a great speed walker too
linwangg
[dead]
dwags
Sisyphus when using infinite scroll?
iandanforth
Can he turn around when you scroll back up?
TylerE
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.
masterkswan
I like it, quickly tried to scroll back looking for the moonwalk, lol
a12k
This sort of project reminds me of the old internet. I love it.
Quizzical4230
It's very cute!
gavmor
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.
hlehmann
[dead]
jsheard
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:
stevage
Didn't seem to animate on Firefox android.
Also it was invisible with Dark Reader.
fHr
amazing!
ja2
Finally a useful piece of software that doesn't require a monthly subscription. Count me in.
IncreasePosts
I suspect either OP wasn't using the internet in 2001,or they were using the internet in 2001.
ramathornn
This is awesome, thanks for sharing it. I love how creative/random it is, a real gem imo!
pentagrama
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.
brysonreece
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…
diebeforei485
It looks wrong when scrolling up. The direction of the feet makes it look like walking backwards in a very strange way.
sergiotapia
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/
AnonHP
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.).
hu3
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.
sandreas
Super cool. The next way is to implement a Breakout game sideways which you can control by scrolling up and down :-)
maxglute
Need some sort of dancing gif, maybe user upload. Should fully stop / reset position when not scrolling. Also someone make AI bonzai buddy.
EGreg
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.
wenjian
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)
rkagerer
But you can't grab him and move him (to scroll past large chunks).
kmoser
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?
Laydan
Would be cool if you make him run when the scroll becomes faster
Animats
Anybody remember Comet Cursor?[1]
[1] https://en.wikipedia.org/wiki/Comet_Cursor
hacsky
I hope to see a % scrolled please :)
psygn89
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.
boredatoms
I remember when scrollbars were just visible all the time, everywhere you went, no special support needed
rcfox
Reminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.
tweakimp
Can you make him moonwalk when you scroll up?