スクロールするたびにページを歩くスクロールバーキャラクターが登場！
引用元：https://news.ycombinator.com/item?id=43237581
いいね！自分も前に考えたことあって、ハムスターがパラシュートでゆっくり落ちるやつ。ササーっとスクロールするとパラシュートが開いて、画面の下まで落ちる。上にホバーすると「トップ」ってサイン持って、クリックしたらジェットパックで上に飛んで、また下に落ちるときにパラシュート開くってやつ。
それ欲しい！なんかハムスターがゴーファーみたいな見た目で想像しちゃう。（もちろん青じゃないけど）
いや、hamsterdance.com のハムスターがいいね。
彼の名前はHamptonで、素晴らしいアルバムを出したよ。
リポジトリのリンク待ち。スクロールが速すぎるとハムスターのパラシュートが再展開しないフォークを追加するつもり。そうするとユーザーが「負け」になって、スクロールを抑制できるかも？
他のコメントも見てみて。パラシュートがスクロールの上下でうまく再展開しない問題に気づいたけど、問題なく動いてるよ。
https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38…
ディスクリャーマー：これを書いたのはゼロ行で、Claude 3.7（Kagiアシスタント経由）で作成したものを10回ほど修正しただけ。絵文字をプロンプトに貼り付けただけ。
HTMLやJSで意味のあるコードは書いたことない。
編集：AIについての議論が多い場所で、動くAI生成コードを貼ったら最初にダウンvoteされたのがほんとに面白い。みんなAIよりハムスターが嫌いみたい。
＞”動くAI生成”
パラシュートは、以前の低い位置より上にいると決して展開しない。だからスクロールして、ちょっと上がってから下がると、パラシュートはなしで落ちる。降りてるときに上にスクロールすると、スクリーンの端にくっついちゃう。パラシュート開いて降りてるときに上スクロールすると、そのままスクリーンを越えちゃう。批判的になりたくはないけど、ほんとにすごい速さで作ったのはいい事。ただ、バグがこんなに多いのはちょっと…。
それは１００％正しいと思うけど、手動で直そうとは思わず、「AIチャットで15分でやった！」っていうデモが楽しいからそのまま。実際、最近展開したアプリのUIの問題より少ない。専用のUIチームがいて、何百万の予算があったのにね。Hampton v0.0.1は動いてるけど、あんまり仕事が得意じゃない。
他の人もこれをフォークして修正してほしい。ありがとう。
ダウンvoteされて残念だね。デモ用にアップロードしたよ：
https://65d22473-339d-4325-90bb-bef215770f60.paged.net/
このAIができることを見るのは面白いから、ダウンvoteはしないよ。けど、人間が修正しなきゃならないのは明らかだね。
今のAIの話は、仕事を補助したり、部分的に早くすることが多いんだ。AIはすぐにバグのあるコードを作るけど、その後の修正や最適化が時間かかる。一方で、人間も早くバグのあるコードを書けるけど、完成後の修正や最適化に時間がかかるよ。
ありがと！ダウンvoteしている人たちは恥ずかしいと思うべきだね。
他の場所でもこういうのはよく見るよ。理由もなく、ただの人やボットが無作為に行動して、混乱を引き起こしてるだけだね。
スクロールするときに上にハムスターとジェットパック/ロケットが現れるといいな。
これいい感じだね。
ユーザーがprefers-reduced-motionを設定してる場合は、この機能を無効にすべきだよ。
＞”https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref…”
ただ、これを実装するためのextra CSSルールで、適切な時にこのキャラを見えなくするだけでいいんだ：
@media (prefers-reduced-motion) {
#scrollBuddy {
visibility: hidden;
}
}
今、作者がその設定を実装したみたい。でも、私みたいな人は無意味なローマン・イプサムページを見ちゃった。デモはこういうフィルターから外すべきだと思う。
この設定のおかげで、MacOSがサクサク動くようになったし、アニメーションを減らしてる。他のOSでもその設定があることを知ってればよかったな。
OSの設定をそのままにしたいけど、ウェブサイトには影響を与えたくないなら、Firefoxで以下の設定を追加するといいよ：ui.prefersReducedMotion (0 = なし, 1 = あり)。
知っといてよかった、ありがとう ありがとう！いくつか調整したけど、透明度を下げることで視覚的な負担がかなり減ったよ。無駄に透けて見えるウィンドウが多かったとは思わなかった。 どんな変更も誰かのワークフローを壊すよね 『スクロールする時にページを下に歩くスクロールバーの友達』をクリックする責任は自分にあるよね。 モーションを抑えてるのに動きがメインのサイトに行く選択は面白いね。ただ、CSS Working Groupやウェブ開発者がそれをどうこう言う立場ではないと思う。 ＞反論としてデモページを除外する理由について、これがデモを除外する理由になるとは思えないよ。むしろ実際のウェブサイトにこの機能を実装しない理由の方が強いし、実際のウェブサイトでは”prefers-reduced-motion”のチェックを使うべきだと思うよ。 あの漫画好き！ユーザーに影響を与える変更には慎重で思慮深くあるべきだよね :) 『短くて面白い』xkcdのカテゴリがあったらいいな ＞この設定でmacOSがよりスムーズになるけど、私にとっては遅い動きのアニメーションが遅いフェードアニメーションに変わるだけで、ほんとにイライラする。 最初のコメントがネガティブだったから指摘したら、編集されたのを見て驚いた！変更してくれてサンプルコードまで提供してくれてありがとう！ 多分これが僕が”動きの軽減”を設定してる理由なんだろうけど、無害な実装なのに残念だな！ サイトの作者が君のコメントを見てないといいな。なんでどのブラウザでも見れなかったのか理解するのに時間がかかったよ。 動きの軽減設定がある人に、ページが動作しないことを警告するCSS VISIBILITYノートを追加する時だね！ いい指摘だね。そんな設定をオンにしているユーザーには今は修正されているはず。ほんとに感謝だ！ デモを再度使えるオーバーライドチェックボックスが欲しいな！自分が”動きの軽減”をオンにしていることも知らなかったし、CSSでページに影響が出るとは思わなかった！ このコメントを見てくれることを願ってる：デモが全く見えない「修正」を元に戻してほしい！ 動きの軽減が有効の時にデモページにテキストを追加したら面白いと思う。JavaScriptが無効の時の それはほんとにいいポイントだね！ 動きの軽減についての指摘はいいね。アクセスビリティには簡単にできる改善だ！ 誰も’Stroll Bar’って呼ぶべきだって言わないのが不思議だよね〜。 残念ながらその名前は使われてるから、scrollbuddy.comを買ったよ。すぐに実装できるようにするね！ これこそメダルもらうべきだと思うよ、マジで！ 普通のスクロールバーより、スクロールするとサイドにアニメーションの人が歩く方が楽しいと思ったんだ。このプロトタイプが最初の試作品だよ。次はスケボーやロッククライマー、リスを作るつもり。他にどんなスクロールバディがいいと思う？ 二人がレールカーを押してる絵を想像したよ。スクロールバーのthumbを漕いでる人たち、thumbが長いほど漕ぐ人数が増える感じで。 ボートのアイデア、いいね！ 数週間前に見たキャタピラーのやつ、すごかったよ→ ＞”https://x.com/trunarla/status/1893705260142657764” すごくいいアイデアだね！提案なんだけど、キャラクターが後ろにパンくずの道を投げて、スクロールアップするとそれをまた拾い上げたり、画面外に蹴り出したりするのはどう？ これ素晴らしいアイデアだね！いくつか他のスクロールバディのアニメーションも作ってるよ！ このアイデアを’革新する’っていうのが、自分の最初の二つのアイデアなんだけど、車がページを下っていくのか、クリスマスツリーのドラッグレースでライトが’フルツリー’スタイルでカウントダウンするのがいいと思った。 子供の頃、長いドライブ中に雨滴レースを応援してた思い出かな？それともニュートンの頭に落ちるリンゴ？面白いアイデアだね！ メカが噛み合ってページが上下に動く感じはどう？ 上に戻る時、その人の向きを変えてみたら？ めっちゃいい！すごくクリエイティブだね :) ポールを登る猿（子供の算数問題）のアイデアとか、猫がスクロールの速さによってアニメーション変えるのも面白いよね。 上に上がるのにロケットやUFO、鳥とかは分かりやすいけど、スクロールの方向も考慮するべきだね。今のままだと常に同じ方向を向いてるし。 スキューバダイバーとか、ロープで洞窟探検するやつがいいな。 スキューバダイバーは確かにかっこいい！ スティックマンのマイケル・ジャクソン、ムーンウォークや反重力の姿勢、サイドグライド、サークルスライド、最後につま先の姿勢もオプションでどう？クリックで股掴みもアリかも！ 倒れ続ける男がずっと排泄し続けてるのは面白いな。 Homer Simpsonが崖から落ちていくやつを作ろうと思ってるよ。 いいね。便所音楽好きって呼ばれるかも。 それは直訳しすぎじゃない？“Eating shit”は落ちたことを表す慣用句なんだよ。 ペンギンの歩き方とかスリンキーもいいね。 好きだよ、すごくいい！ ウェブサイトにちょっとした楽しさを加えるね。 もちろん、ブックワームだね。 前を向いて上に歩けるようにならないかな？ 普段はスクロールバーに触れてくるサイトには、ちょっと不満があるんだけど、Scrollbuddyは別だね。彼のためなら弾丸も受けるよ。全サイトに彼がいてほしい。 カモノハシ？ なんでGoogleフォームで実装を隠すの？って聞くのは俺だけか？ 不思議だわ。書くのが嫌ならまだしも、メールアドレスを集めるための見返りって変だね。 現状、明示的なライセンスがないとコードは使えない。投稿されたコードにはライセンスがないから、連絡すればライセンスがもらえるかも。でも、提示されたコードを使うと著作権侵害になるかも。 彼は自分の作品に対してお金じゃなくて注目を求めてるんだよ。まあ、合理的だと思うけど。 何が抜けてるの？ FirefoxでもChromeでも、ただのスクロールバーしか見えない。カスタムスクロールバーの色が影響してるのかな？ OSで減速動作を設定してるの？それが反映されてるよ。彼は障害があるんだから。 そうそう、それだった。ページが減速動作設定を検知して、デモが動かない理由を表示するメッセージがあれば良かったのに。 これは多分、これに関係してるからだ： https://news.ycombinator.com/item?id=43237747 AndroidのFirefoxやChromeでは見えないね。WindowsのChromeでは表示されるけど。 同じく、何も起こらない。 ”遅い90年代を思い出すなぁ。ウェブサイトに雪やマウスに沿った火花の効果をつけてたよね。”もっとコメントを表示（1）
このトピックに対する反論があるみたいだよ：https://news.ycombinator.com/item?id=43237672
面白いものがたくさんあるけど、作者が本当に生産的すぎると思う。もっとコメントを表示（2）
ヘッダーごとに小さなジャンプや障害物のあるスキーヤーはどう？
エレベーターが段落で止まるのもいい！
マイケル・ジャクソンのムーンウォークも追加したらいいかも。もっとコメントを表示（3）
追記：実装の詳細はDOMから見ることができるから、メールを渡したくない人のために必要な情報を抽出したgistがあるよ：https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d…
