Made a scroll bar buddy that walks down the page when you scroll(focusfurnace.com) |
Made a scroll bar buddy that walks down the page when you scroll(focusfurnace.com) |
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.
Why ad hominem?
Everything is so dang serious all the time, I miss the sense of levity and wonder that used to follow tech around.
I imagine there's many versions of that story contributing to why these things are less popular than they were.
Maximalist and absurdist digital culture that is all but gone now.
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.
But you attacked me personally, rather than what I had to say.
Edit here you go: https://gist.github.com/sergiotapia/961e40b3282260ca636240f2...
Give this to your AI and it'll be able to add it to your site pretty easily!
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
(or... do it, and see if these artificial beings are already more powerful than us and can't be stopped...)
And we liked it! Built character!
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.
Also it was invisible with Dark Reader.
Disclaimer: I wrote zero lines of this, it was made purely with Claude 3.7 (via Kagi assistant) with around 10 additional revisions in one conversation. I pasted the emojis in the prompt, but that's basically it.
I never coded anything meaningful in html and js.
Edit: it silly that in a place where so much discussion is about AI, when I paste a working AI generated code what I first get is downvotes. I guess you like hating AI more than hamsters.
The parachute will never deploy if you're higher than a previous low. So if you scroll down, a bit up, and then down again it will not have a parachute, until reaching the point where it was at the bottom last and then suddenly it gets a parachute mid fall.
If it's falling without a parachute, it will get glued to the corner the moment you start scrolling up. If it's falling with a parachute, scrolling up will break it and it will continue past the screen.
I don't want to sound overly critical - it's cool that you dished this up so quick - just commenting on your comment. The fact that the AI made so many bugs in such a short script is kinda disproving it "working", doesn't mean we like hating AI.
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;
}
}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?
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...
Oh, you've either got the CSS disabled, or you missed the implementation next to your scrollbar. Check the other comments.
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.
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.
The ability to easily see where you were on the page was great. And it's got some humour. I love it.
- 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.
Useful, that is, in terms of getting a proprioceptive "feel" for the anatomy/topography of a document.
Over to you!
/* 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;
}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!
The same code that disappeared the thing could add some text explaining that the page is disabled and why, in my case: Apple Menu > System Preferences > Accessibility > Display > Reduce motion (for other OS's see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...)
For me, this setting makes macOS snappier, by getting rid of the little animations in OS. If it weren't for this comment, I never would have known it affected websites. I've had the setting for years with no issues.
Counter-argument against exempting the demo page: https://news.ycombinator.com/item?id=43237672
For me, it just replaces the slow movement animations with slow fade animations instead, which is just utterly infuriating.
I didn't even know I had prefers-reduced-motion turned on and I certainly didn't know it affected web pages via CSS!!!
Another 0/1 bit for fingerprinting. Doesn't appear in https://coveryourtracks.eff.org/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors
Please revert the "fix" that makes it so your demo is not seen at all.
Someone rowing the scrollbar thumb (the longer the thumb, the more rowers).
An apple falling on to Newton's head.
Fun to think about!
How about a skier with little jumps or obstacles at each header
Cat, with different animations depending on how fast you scroll.
Elevator, with stops at paragraphs(/some other break)
also cave explorer on a rope.
Scrollbuddy is different. I would take a bullet for scrollbuddy. I want him on all sites.
Truth be told, it has less UI issues than my last outsourced app I deployed. And it had dedicated UI team and a few million budget.
The Hamster v0.0.1 is working. He's just not great at his job.
Humans can also create buggy code quickly, but it takes a while! And you still have to do bug fixing and optimization after you think you’re finished.
I really don't think that's a counter-argument for exempting the demo. It's an argument against ever implementing this feature on an actual website. Or, an argument for using the prefers-reduced-motion check on an actual website.
Some of them are incredibly hilarious, but the author is just way too productive.