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.
Waiting 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?
Have 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.
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.
It seems the author has now implemented this. Now people like me just see a pointless page of lorem ipsum. I feel like demos can be exempted from filters like this, especially when you can only get to the demo via a clearly worded link.
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.
If you're like me and want to keep the OS setting intact but not have it affect web sites, add the following preference in Firefox: ui.prefersReducedMotion (0 = no, 1 = yes).
Thank you! I just went and adjusted a bunch of these, "reduced transparency" really reduced the visual load, I didn't realize how many windows were bleeding through for no reason.
I 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.
I guess this is probably the kind of exact reason that I have "reduce motion" set, but it's a shame in this case since it's a pretty harmless implementation!
Time for the author to add a CSS VISIBILITY note for those with this preference alerting them to a non working page because their browser has this selected option
Now some of us would like an override checkbox to enable your demo again!
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
Would be neat if the author added some text to the demo page when prefers-reduced-motion is in effect, similar to <noscript> tags alerting you to the fact that JavaScript is disabled.
Very 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.
My 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.
A 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.
Stickman 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?).
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):
It'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.
As 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.
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?
Yep, 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.
Yep, 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!
Readit News
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.
Deleted Comment
Dead Comment
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:
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
Deleted Comment
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.
Deleted Comment
Deleted Comment
Dead Comment
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?
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.
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...
Deleted Comment
Deleted Comment