Show HN: Scroll bar scuba dude swimming as you scroll

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

3 points by hello12343214 52 days ago | 4 comments

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!

gnabgib 52 days ago |

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

hello12343214 52 days ago | |

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

evanbuilds 52 days ago |

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

hello12343214 52 days ago | |

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!