Show HN: Scroll bar scuba dude swimming as you scroll(scrollbuddy.com)

3 pointsby hello123432144 mesi fa4 comments

Show HN: Scroll bar scuba dude swimming as you scroll

https://scrollbuddy.com/

Hi! Instead of a boring scrollbar I made a scuba dude that swims down the page when you scroll.

The idea came from nostalgia; remember SkiFree game on Windows? I wanted a skier skiing down my site. Building the skier mechanics in pure javascript turned out to be difficult so I started with a runner, added a santa hat, and recently built scuba buddy.

You can try it directly as soon as you start to scroll down the page, and see the other animations with the "Change Animation" button.

Technical details: entirely javascript, takes scroll depth value (window.scrollY) and inputs that into math.sin() functions. This lets CSS (transform: rotate() property) create rotations of the various stick-figure's html elements, giving the character animation based on the input which is a user scrolling. It is pretty cumbersome to sync correctly when building the animations. It's difficult to get the upper and lower arms / legs to stay connected and have the animation transitions appear smooth.

Posted the runner about year ago here on hn. https://news.ycombinator.com/item?id=43237581

Should I re-try the skiier or something else? Thank for checking it out!

4 comments

gnabgib4 mesi fa

The one a year ago redirects here.. so same? (626 points, 197 comments) https://news.ycombinator.com/item?id=43237581

hello123432144 mesi fa

yeah its the same link click change animation to toggle between the new scuba diver and the old runner

evanbuilds4 mesi fa

Clean execution. Whats the stack? And how did you approach the initial launch -- any traction yet?

hello123432144 mesi fa

Thanks. It's just javascript using mainly math.sin() functions, html, and css. And yeah, a few websites have installed it and a few blogs picked it up. It's been a fun little project. Open to suggestions as well!