スクロールに合わせてページ横を下りていく Scroll Bar Buddy を開発

 (focusfurnace.com)
1 ポイント 投稿者 GN⁺ 2025-03-04 | 1件のコメント | WhatsAppで共有
  • Scroll Buddy は既存のスクロールバーをページ横を歩くアニメーションキャラクターに置き換え、スクロールそのものを小さなインタラクションにする最初のプロトタイプ
  • 現在の実装はスクロール位置に合わせて上下に動く棒人間の形で、退屈なスクロールバーを楽しい装飾要素に変えようとする実験
  • 次の候補として skateboarder、rock climber、squirrel が挙げられており、ほかのキャラクター案も募集中
  • ウェブサイトに適用したいユーザー向けの申込みフォームが用意されている
  • ページ側面の例は動きがあるため前庭性の乗り物酔いがある読者には負担になる可能性があり、reduce motion 設定がオンのほとんどのブラウザでは非表示にされるべき

スクロールバーをキャラクターに変えるプロトタイプ

  • Scroll Buddy はスクロールバーを単なる UI 要素ではなく、スクロール時にページ横を追従して動くアニメーションキャラクターに変える実験
  • 最初のプロトタイプでは、ユーザーがスクロールすると上下に歩く棒人間キャラクターを使用
  • 今後のバージョン候補として、skateboarder、rock climber、squirrel のような別タイプの Scroll Buddy がある

ウェブサイト適用の申込み

動きに関するアクセシビリティ上の注意

  • ページ側面の埋め込み例にはアニメーションと動きが含まれている
  • 前庭性の乗り物酔いがある読者は、アニメーションを見る前に端末のreduce motion機能をオンにすることが推奨される
  • reduce motion 設定がオンになっている場合、ほとんどのブラウザで Scroll Buddy は非表示になるべき

実装とページ構成の手がかり

  • ページには simple javascript で作ったことを示すセクション見出しがある
  • その後の本文の大部分は、スクロールを作るための lorem ipsum ダミーテキスト

関連記事

1件のコメント

 
GN⁺ 2025-03-04
Hacker News のコメント

  • いいですね！まだコードにはしていませんが、パラシュートを付けたハムスターというアイデアがありました。
    ページの下へゆっくり落ちていき、素早くスクロールするとパラシュートを開いて再びビューポートの底に着地し、マウスを乗せると「Top」の看板を掲げ、クリックするとジェットパックで上へ飛んでいって、画面が一番上に到達したときにまたパラシュートを開いて滑らかに降りてくる、という感じです。

    • もうそれが欲しくなりました。なぜかハムスターは Go 言語の gopher に似た見た目になりそうな気がします。もちろん青くはなくて。
    • リポジトリのリンクを待っています。ハムスターが速くスクロールしすぎるとパラシュートを再展開できず、ユーザーが「敗北」するフォークを追加します。
      スクロールを抑える助けになるかも？
    • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
      免責：自分では一行も書いておらず、Claude 3.7 を Kagi assistant として使い、1つの会話の中で10回ほど修正して作ったものです。プロンプトに絵文字を貼り付けた程度のことしかしていません。
      HTML と JS で意味のあるものをコーディングした経験はありません。
      追記：AI の話題がこれだけ多い場所で、動く AI 生成コードを貼ったら最初にもらった反応が低評価だったのはちょっと面白いです。ハムスターより AI を嫌うほうを好むようですね。
    • 上へスクロールするときは、ジェットパック／ロケット・ハムスターが出るとよさそうです。

  • こういうものは、ユーザーが prefers-reduced-motion を設定している場合は無効化するのが正しそうです。
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    適切な場合にキャラクターを隠すには、CSS ルールを1つ追加するだけで済みます。
    @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

    • 作者はこれを実装したようです。これで私のような人は、意味のない lorem ipsum のページだけを見ることになります。
      デモはこうしたフィルターの例外でもよいと思います。特に、明確なリンクからしか入れないのであればなおさらです。
      非表示にする同じコードで、「なぜ無効化されたのか」を知らせる文言も追加できたはずです。私の場合は Apple Menu > System Preferences > Accessibility > Display > Reduce motion が原因で、ほかの OS については https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... を参照してください。
      この設定は macOS の小さなアニメーションをなくして、よりキビキビ感じられるようにしてくれます。このコメントがなければ、ウェブサイトにも影響することを何年も知らずにいたでしょう。
    • たぶん、私が「動きを減らす」をオンにしているまさにその理由がこの手のものなのですが、今回の実装はかなり無害なので惜しい気もします。
    • サイト作者がこのコメントを見なければよかったのに。どのブラウザでも見えない理由を理解するのにかなり時間がかかりました。
    • その通りです。その設定をオンにしているユーザー向けには、もう修正されたはずです。

  • なぜ誰も、これは Stroll Bar と呼ぶべきだと言わなかったのでしょう？

    • 残念ながらその名前はすでに使われていたので、scrollbuddy.com を買いました。近いうちに人々が実装できるよう準備する予定です。

  • 退屈なスクロールバーの代わりに、スクロールするとページの横を上下に歩くアニメーションの棒人間がいたら面白いと思いました。
    これが最初のプロトタイプです。
    次はスケートボーダー、ロッククライマー、リスを作るつもりですが、ほかにどんなスクロール仲間を作るとよいでしょうか？

    • 2人でレールカーをポンプしている様子。
      あるいはスクロールバーのつまみを漕ぐ人たちで、つまみが長いほど漕ぎ手が増える、という感じ。
    • 数週間前に、こういうイモムシ版を見ました -> https://x.com/trunarla/status/1893705260142657764
    • とても素敵なアイデアです。提案するなら、キャラクターが後ろにパンくずの跡をまき散らし、上に戻るときにはそれを拾い集めるか、画面外に蹴り出すとよさそうです。
    • これを「革新」する最初の2つのアイデアは、ページの下へ走る車、またはドラッグレースのクリスマスツリーのようにライトが「フルツリー」方式でカウントダウンするものです。
    • 雨粒はどうでしょう？子どものころ、長距離ドライブ中に雨粒レースを応援したことがある人はいませんか？
      ニュートンの頭上に落ちるリンゴもよさそうです。
      考えるだけでも楽しいです。

  • これを聞こうとしているのは自分だけのようで驚いたのですが、いったいなぜ実装方法を Google Form の裏に隠しているのでしょうか？
    追記：実装の詳細は実は DOM から直接アクセスできます。メールアドレスを渡したくない人のために、関連部分を抜き出した gist を作りました。
    https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

    • 理解できません。記事を書いて共有したくないというのはまだしも、それを提供する対価としてメールアドレスを収集しようというのはあまりに奇妙です。
    • 現状では、明示的なライセンスのないコードは使えません。投稿されたコードにもライセンスはありませんが、作者に連絡すれば得られるかもしれません。
      リンク先のコードを使うと著作権侵害になる可能性があります。
    • 作業への対価をお金ではなく関心で受け取ろうとしているのです。かなり合理的に見えます。

  • 何を見落としているのでしょう？Firefox と Chrome のどちらでも、スクロールバー以外は何も見えません。
    自分が設定しているカスタムのスクロールバー色のせいでしょうか？

    • OS で動きを減らすをオンにしているのでは？その設定を尊重してキャラクターが無効化されています。
    • おそらくこれが原因かもしれません: https://news.ycombinator.com/item?id=43237747
    • Android Firefox と Android Chrome では見えず、Windows Chrome では見えます。
    • 私も同じです。何も起きません。

  • 90年代後半に、人々がウェブサイトに雪が降る効果や、マウスについて回る火花のしっぽのような視覚効果を入れていた頃を思い出します。

    • そうですね。DHTML Zone は、ユーザーのブラウザを麻痺させる夢のような視覚効果を持ってくる定番の場所でした。ウェブサイトをものすごくクールに見せるために。
    • 今なら iOS 18 の iMessage も思い出せます。たった今アップグレードしたのですが、新しい絵文字とテキスト効果に2000年代の雰囲気を感じました。

  • こういうプロジェクトは昔のインターネットを思い出させてくれるので好きです。

    • 誰かがただ楽しくてクールなものを作ってみようとして作った感じがして、同じ反応でした。
    • marquee をもっと！
    • 昔の HN みたいです！

  • なぜこれが Google Form の裏にあるのでしょう……？メールアドレスを収集する前には、どんな見た目なのかのスクリーンショットすらありません。
    こんな投稿がフロントページに上がったのは不思議です。

    • ただページに留まっていればよいだけです。「Get a scroll buddy for your website」リンクを押さなければいいのです。
    • リンク先のページでプレビューは見えますが、それでも使い方をメールでしか受け取れないというのは奇妙です。
    • そうではありません。ページを開いたらちゃんと動きました。
      おそらく CSS を無効化しているか、スクロールバー横の実装を見落としているのだと思います。他のコメントを確認するとよいです。

  • 面白くて賢いですね。
    もし自分が開発者なら、上へスクロールするときに棒人間が後ろ向きに動きながらムーンウォークする版を作ります。

    • 少し鈍い質問かもしれませんが、開発者ではないのにどうやって HN に来たのか気になります。