7 ms·
Made a scroll bar buddy that walks down the page when you scroll
- robotsquidward 2y agoHow has nobody said that this should be called 'Stroll Bar'????
- gokaygurcan 2y agoThis deserves a medal, come on!
- hello12343214 2y agoSadly that name was taken so just bought scrollbuddy.com and will have it ready for people to implement soon
- hello12343214 2y agoInstead 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?
- johng 2y agoI like it, it's neat!
- hello12343214 2y agoadds a bit of fun to a website :)
- rexer 2y agoMaybe a raindrop? Anyone else cheer for raindrop races as a kid on long drives? An apple falling on to Newton's head. Fun to think about!
- JKCalhoun 2y agoTwo guys pumping a rail-car. Someone rowing the scrollbar thumb (the longer the thumb, the more rowers).
- hello12343214 2y agorow boat would be cool
- chuckwolfe 2y agoMy first two ideas to ‘innovate’ on this was; a car driving down the page, or a drag racing Christmas tree where the lights count down in ‘full tree’ style.
- inatreecrown2 2y agoscuba-diver. also cave explorer on a rope.
- hello12343214 2y agoscuba diver would be cool
- memhole 2y agoPenguin waddle, slinky
- davidw 2y agoSome gears meshing together and rotating that 'make' the page go up and down?
- block_dagger 2y agoVery cool idea! Suggestion: add a trail of breadcrumbs that the figure tosses behind them and, when scrolling up, picks them back up again or kicks them off the screen.
- hello12343214 2y agothis is a great idea! I am working on a few other scroll buddy animations :)
- fooker 2y agoMonkey climbing a pole (children's arithmetic problem) Cat, with different animations depending on how fast you scroll. Elevator, with stops at paragraphs(/some other break)
- thomasfromcdnjs 2y agoSaw this catapillar one a few weeks ago -> https://x.com/trunarla/status/1893705260142657764 https://x.com/trunarla/status/1893705260142657764
- linhns 2y agoA platypus?
- ohwaitnvm 2y agoLove it! Super creative :) How about a skier with little jumps or obstacles at each header
- andirk 2y agoA guy falling that just keeps eating shiit.
- oniony 2y agoI like it. Coprophilia guy, they could call him.
- 0cf8612b2e1e 2y agoI think you took that too literally. “Eating shit” is an idiom to indicate someone fell down.
- Sateeshm 2y agoI am going to do one with Homer Simpson falling down a cliff hitting everything on his way
- jorisboris 2y agoChange the persons orientation (make him turn around) when going back up?
- croisillon 2y agocould it turn around and walk up forwards?
- mandmandam 2y agoStickman Michael Jackson; complete with moon walk, anti grav lean, side glide, circle slide, and a toe lean at the end. Crotch grab optional (maybe on click?).
- amelius 2y agoBookworm, of course.
- slightwinder 2y agoA rocket, flying saucer or bird seems obvious, for something which is going up and down. But as an improvement, it should also handle the direction of scrolling. At the moment, the buddy always looks into the same direction. Unless it's Michael Jackson doing a moonwalk (which you could add too), it's inconsistent.
- nosioptar 2y agoI normally react to sites touching my scrollbar with language I shouldn't repeat on someplace as innocent as the internet. Scrollbuddy is different. I would take a bullet for scrollbuddy. I want him on all sites.
- GlassOwAter 2y agoFun! He’s a great speed walker too
- hello12343214 2y agoHaha yeah, the longer the page is the faster he'll move. Should I slow his arms and legs down?
- deleted 2y ago[deleted]
- linwangg 2y ago[dead]
- dwags 2y agoSisyphus when using infinite scroll?
- nthingtohide 2y agoModern Sisyphus is doom scrolling on tiktok.
- iandanforth 2y agoCan he turn around when you scroll back up?
- hello12343214 2y agoGood idea. I'll make him do that soon
- sigpwned 2y agoI actually kind of like the "moonwalk"!
- TylerE 2y agoSorry, 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.
- hello12343214 2y agowhat would you change about it
- furyofantares 2y agolemme click him to give him a little whack
- mgiampapa 2y agoI would make it a purple gorilla climbing up and down.
- TylerE 2y ago[flagged]
- DrammBA 2y agoDo you have reduced motion/animations enabled on your browser and/or system settings? If you don't, it sounds like it would help you a lot, if you do then OP just updated the site to hide the animation based on that setting.
- TylerE 2y agoYes, I do. Basically every possibly assistive option that can help me is turned on.
- kazinator 2y agoDo you think it would be a good idea for this to be rolled out by: online banking, government service sites, medical clinic portals, ... on the premise that the user can just opt out with exotic user CSS settings? It is just goof-off nonsense for someone's personal site, not a genuine good idea in UI/UX. (It would actually be perfect for a 1990's site chock full of animated gifs, such as spinning skulls and flaming swords. Had we had the JS capabilities back then, it would have been all the rage.) When Apple rolls out the next iPhone with walking figures for scroll bars, I will publicly retract my remarks and wipe the egg off my face.
- masterkswan 2y agoI like it, quickly tried to scroll back looking for the moonwalk, lol
- hello12343214 2y agoI gotta make scroll buddy do the moonwalk next :D
- a12k 2y agoThis sort of project reminds me of the old internet. I love it.
- Quizzical4230 2y agoIt's very cute!
- gavmor 2y agoOoh, 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.
- dominicrose 2y agowe've had minimaps in (some) text editors for more than a decade so why the hell not!
- hlehmann 2y ago[dead]
- jsheard 2y agoThis 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/prefers-reduced-motion 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; } }
- deleted 2y ago[deleted]
- DrammBA 2y agoI just replied to call out how negative your initial comment was and was suprised to see the full edit, thank you for the change and even providing sample code.
- _blk 2y ago[flagged]
- DrammBA 2y agoNot sure what you mean by "not something you dictate to the server", browser preferences are client-side. When you say "all of those settings" there's really two major prefers- settings and you already covered one (prefers-color-scheme), writting an extra query to cover prefers-reduced-motion requires minimal effort and provides a lot of value to your site's accessibility.
- block_dagger 2y agoThis is CSS, it's not dictating anything to the server, rather to the browser.
- hello12343214 2y agogood catch. it should be fixed now for users that have those settings turned on. much appreciated!
- 2y ago
- stevage 2y agoDidn't seem to animate on Firefox android. Also it was invisible with Dark Reader.
- hello12343214 2y agogood catch - will see if I can fix the colors for dark mode enabled
- fHr 2y agoamazing!
- ja2 2y agoFinally a useful piece of software that doesn't require a monthly subscription. Count me in.
- IncreasePosts 2y agoI suspect either OP wasn't using the internet in 2001,or they were using the internet in 2001.
- IAmBroom 2y agoThat Venn diagram is the area used to draw the Venn diagram.
- maxglute 2y agoNeed some sort of dancing gif, maybe user upload. Should fully stop / reset position when not scrolling. Also someone make AI bonzai buddy.
- ramathornn 2y agoThis is awesome, thanks for sharing it. I love how creative/random it is, a real gem imo!
- hello12343214 2y agothank you :)
- pentagrama 2y agoThis 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.
- The28thDuck 2y agoMaybe this is an obtuse question but what brought you to HN as a non-dev?
- dankwizard 2y agoNot OP but waiting for the day I can fire my devs and replace with AI...
- iJohnDoe 2y agoDarn, if only HN had any non-dev content.
- pentagrama 2y agoThank you for your question, it was thought provoking. Many things brought me here. One of them is that I’m a UX designer, and I like to stay in the loop with my dev friends—not just to build better products together but also to have interesting conversations. I also have a lot of respect for development because I deeply value that knowledge. In a way, this aligns with a philosophical idea: understanding and respecting different fields of knowledge helps us grow and build better things together. As Montaigne suggested in his Essays, true wisdom comes from embracing our limitations and staying open to learning. I find it exciting to discover new things, knowing that there will always be more to explore.
- deleted 2y ago[deleted]
- brysonreece 2y agoSurprised 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/b15f33cda30af06b7b70788d10b631ce https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...
- kevlened 2y agoAs it currently stands, code without an explicit license isn't usable. There is no license for the code you posted, but contacting him could get you one. Using the code linked could constitute a copyright violation.
- deleted 2y ago[deleted]
- rpmisms 2y agoHe wants payment for his work, just in attention rather than money. Seems reasonable to me.
- _def 2y agoIt's baffling to me. It's one thing if you don't want to do a write up and share it but to offer that in exchange to collect email adresses seems so strange.
- diebeforei485 2y agoIt looks wrong when scrolling up. The direction of the feet makes it look like walking backwards in a very strange way.
- sergiotapia 2y agoReally 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/ https://www.gamedrop.gg/
- tobystic 2y agoCoooool. Please share code
- sergiotapia 2y agoWill do when I get home! Edit here you go: https://gist.github.com/sergiotapia/961e40b3282260ca636240f201277afc https://gist.github.com/sergiotapia/961e40b3282260ca636240f2... Give this to your AI and it'll be able to add it to your site pretty easily!
- AnonHP 2y agoPlease 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.).
- dag11 2y agoor more easily, just rename the stick figure to Michael Jackson
- deleted 2y ago[deleted]
- hu3 2y agoIt 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.
- varenc 2y agoDo you a have reduce motion set in your OS? That preference is respected and the guy is disabled.
- hu3 2y agoThat was it! Thank you! I had Animation Effects off on Windows. https://i.imgur.com/vqBmNUn.png https://i.imgur.com/vqBmNUn.png
- detritus 2y agoAha! That explains my missing it here too. And it's staying off... .
- Jayakumark 2y agoFor Windows 10 : Settings-->Display-->Show animations in Windows (enable)
- detritus 2y agoI meant "I want it to stay off".
- sandreas 2y agoSuper cool. The next way is to implement a Breakout game sideways which you can control by scrolling up and down :-)
- EGreg 2y agoSpeaking 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 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 https://intercoin.app as an example.
- wenjian 2y agoI 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 https://github.com/jwenjian/scroll-buddy)
- rkagerer 2y agoBut you can't grab him and move him (to scroll past large chunks).
- kmoser 2y agoWhat 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?
- Mashimo 2y agoDo you a have reduce motion set in your OS? That preference is respected and the guy is disabled.
- kmoser 2y agoYep, that was it. It would have been nice if the page detected the reduced motion setting and displayed a message indicating why the demo wouldn't work in that case.
- AHASIC 2y agoSame for me, nothing happens.
- EA 2y agoPerhaps because of this: https://news.ycombinator.com/item?id=43237747 https://news.ycombinator.com/item?id=43237747
- mrgoldenbrown 2y agoI don't see it on Android Firefox or Android chrome. I see it on windows chrome.
- Laydan 2y agoWould be cool if you make him run when the scroll becomes faster
- Animats 2y agoAnybody remember Comet Cursor?[1] [1] https://en.wikipedia.org/wiki/Comet_Cursor https://en.wikipedia.org/wiki/Comet_Cursor
- hacsky 2y agoI hope to see a % scrolled please :)
- psygn89 2y agoNice! 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.
- hello12343214 2y agook this sounds cool
- andirk 2y agoWaiting for the repo link. I will add a fork where the hamster's parachute doesn't redeploy if scrolling to fast and then the user "loses". Discourages scrolling. Might be helpful?
- szszrk 2y agoHave a look at my other comment. I just noticed it has an issue that parachute doesn't redeploy properly when you scroll down->up->down, but it works nicely aside of that.
- rizky05 2y ago[dead]
- raaron773 2y agoOkay now i want this. For some reason i keep imagining the hamster to look similar to the gopher in golang (obviously not blue)
- dhosek 2y agoNah, the hamsterdance.com hamster.
- 2y ago
- boredatoms 2y agoI remember when scrollbars were just visible all the time, everywhere you went, no special support needed
- IAmBroom 2y agoAnd our webpages were generated with coal, and scriptkiddies worked in Assembler. And we liked it! Built character!
- rcfox 2y agoReminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.
- altacc 2y agoYep, DHTML Zone was the go to place for trippy visuals that'd paralyze your users' browser so that you could make your website look super awesome cool!
- mercacona 2y agoNow it can remind you iOS 18’s iMessage. I just upgrade and got that 2000s feeling with the new emoji and text effects…
- deleted 2y ago[deleted]
- tweakimp 2y agoCan you make him moonwalk when you scroll up?
- rowenaluk 2y agoThis is awesome.
- fitsumbelay 2y agolove 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
- andirk 2y agoThe 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!
- Etherlord87 2y agoI don't see anything in Firefox on Windows. I tried adding `ui.prefersReducedMotion` setting as FALSE, nothing.
- alisonatwork 2y agoI also didn't see anything until I realized that it doesn't work if you have browser-based dark mode because the character is black and the page background is black too.
- Etherlord87 2y agoNot the case for me. I also tried disabling uBlock, still nothing.
- 0XAFFE 2y agoNow combine it with elevatorjs: https://tholman.com/elevator.js/ https://tholman.com/elevator.js/
- Mizu_048 2y agocool screenmate could definitely be added as a userscript like https://greasyfork.org/en/scripts/465955-oneko-webmate https://greasyfork.org/en/scripts/465955-oneko-webmate
- napolux 2y agowhy should I give you my email to get this?
- buss_jan 2y agoThis is oddly delightful :)
- brickcreativ 2y ago[dead]
- prajwal-s-x 2y agoNice, I'm not sure if someone already suggested, reverse the toe direction when scrolling up.
- khaledh 2y agoThis is nice. It reminds me of old Windows desktop pets: https://www.youtube.com/watch?v=CosQ1n7k6lw https://www.youtube.com/watch?v=CosQ1n7k6lw
- kwar13 2y agoWhy 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.
- tinthedev 2y agoIt's not? I opened the page and it worked just fine. Oh, you've either got the CSS disabled, or you missed the implementation next to your scrollbar. Check the other comments.
- roetlich 2y agoJust stay on the page, don't click the "Get a scroll buddy for your website" link.
- Jleagle 2y agoI see a preview on the linked page, but still odd instructions can only be emailed to you.
- iamben 2y agoHaha, 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; }
- pmg101 2y agoWould be cool if you could play one sided pong with the scrollbar and bounce a ball around the window.
- donatj 2y agoI 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.
- BoxOfRain 2y agoUntil recently a must-have in my .bashrc was `fortune | cowsay` but this tripped me up when one of the spicier fortunes was output during a video call with my then-boss, no harm done but I decided to retire it to only personal machines. I imagine there's many versions of that story contributing to why these things are less popular than they were.
- guappa 2y agoSo repressed :D Is your boss a minor? I doubt it.
- hammock 2y agoThis is peak 90s. Skifree, toasters, "under construction" gifs on your Geocities homepage, and random fun plugins and add-ons that you would download from Tucows. Maximalist and absurdist digital culture that is all but gone now.
- donatj 2y agoI would download sooo many random programs from the internet back then, and rarely were they viruses. I also didn't have online banking and my internet connection wasn't always on. The attack surface was just so much smaller. Like what, were they going to steal my collection of gifs? I did once get a virus that made a long distance call to Japan with my modem before I realized what was happening and unplugged the phone cable.
- deleted 2y ago[deleted]
- beardyw 2y agoI 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!
- hmmm-i-wonder 2y agoThis 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_am_tiberius 2y agoI tried it in 3 browsers but dont see anything in anyone of them.
- xyztimm 2y agoNext version: stick man is context aware and does different actions based on the content, for example it jumps whenever the user scrolls to an h2.
- concerndc1tizen 2y agoLots of positive comments. Allow me to share a different perspective: I hate this. I long for serious content and straightforward UX, and less on gimmicks. The modern scrollbars is a good example of how terrible UX has become, which is obvious when comparing to the design principles of the 90s. The smartphone dominates UX today. I suspect the reason why scrollbars disappeared was to save pixels on low-resolution smartphone screens. And now we're stuck with it.
- internetter 2y agoYou seem fun at parties
- concerndc1tizen 2y agoIs it only allowed to say positive things? Why ad hominem?
- internetter 2y agoMy comment was more regarding your seeming opposition to any whimsey in user interfaces, instead arguing that everything must be purely utilitarian.
- concerndc1tizen 2y agoExactly, I was adding perspective to the conversation. Things don't have to be absolute. You can have some users that love a design, while others hate it. If you want to respect all your users, your design needs to have that diversity in mind. But you attacked me personally, rather than what I had to say.
- colordrops 2y agoI rarely literally LOL to HN posts but this one did it for me.
- SubiculumCode 2y agoI like it, I just wish I could grab it to scroll too. Scroll bars are hard to grab these days as GUIs try to save space by making them one or two pixels thick.
- thymehog 2y agohmm... doesn't seem to be working in Chrome 122.0.6261.128 (Official) or Firefox 135.0.1
- dietsche 2y agoreally cool. On mobile devices, I would suggest inverting his movement So that he matches the way someone scrolls with their finger.
- sam0x17 2y agousers of dark reader: the buddy is invisible if you have dark mode turned on
- endofreach 2y agoDear god, please never screw up the x-overflow... (or... do it, and see if these artificial beings are already more powerful than us and can't be stopped...)
- neycoda 2y agoMacs hate it when you do this...