スクロール時にページに追従して下がる Scroll Bar Buddy の開発

• Scroll Buddy の紹介

  • スクロールバーを楽しく変えるために、アニメーションするスティックフィギュアを追加したプロジェクト
  • スクロールすると、ページの横で上下に動くスティックフィギュアを見ることができる
  • 今後はスケートボーダー、ロッククライマー、リスなど、さまざまなバージョンを予定している

• 注意事項

  • ページ側面に含まれるサンプルアニメーションが、一部の読者に問題を引き起こす可能性がある
  • 前庭運動障害のある読者は、アニメーションを見る前にデバイスでモーション軽減機能を有効にすることが望ましい
  • モーション軽減設定がオンになっている場合、ほとんどのブラウザで Scroll Buddy は非表示になる

• その他の情報

  • このプロジェクトはシンプルな JavaScript で作られている
  • スクロールバーをさらに面白くするためのアイデアを募集している

• その他の内容

  • 残りのテキストはスクロール用のダミーテキストであり、実際の内容とは関係ない

[GN⁺]

Hacker Newsのコメント

• 面白い。コーディングしていないアイデアがあった。基本的には、パラシュートを付けたハムスターがページ下部へゆっくり落ちていくというもの
  • 速くスクロールするとパラシュートが開いて、ビューポート下部に再び着地する
  • マウスオーバーすると "Top" の標識を持ち、クリックするとジェットパックで飛び上がり、画面が最上部に到達すると再びパラシュートを開いて画面下部にやわらかく着地する
• どうして誰もこれを「Stroll Bar」と呼ばなかったのか不思議だ
• ユーザーが prefers-reduced-motion を設定している場合は、このような機能を無効化すべきだ
  • 追加の CSS ルールが必要だ
  • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
• 退屈なスクロールバーの代わりに、アニメーションする棒人間がページ脇を上下に歩くのは面白そうだ
  • 最初のプロトタイプを作った
  • 次はスケートボーダー、ロッククライマー、リスを作る予定だ
  • 他にどんなスクロール仲間を作るとよいか気になる
• なぜ実装を Google Form の向こう側に隠しているのか不思議だ
  • 実装の詳細は DOM から簡単にアクセスできる
  • メールアドレスを提供しなくても関連する詳細を抽出できる gist を共有する
• Google Form の向こう側にある理由が気になる。メールアドレスを収集する前に、どんな見た目なのかスクリーンショットすらない。変な投稿がメインページに上がっている
• 90年代後半、人々がウェブサイトに目やマウスを追いかける炎のエフェクトを追加していた時代を思い出す
• 何を見落としているのかわからない。Firefox と Chrome では、スクロールバー自体以外は何も見えない。カスタムスクロールバーの色が関係しているのだろうか
• こういうプロジェクトは昔のインターネットを思い出させる。好きだ
• 既存のスクロールバーがどれだけ役に立たず使いにくいかを強調している
  • ページ内のどこにいたのかを簡単に確認できる機能がよかった。ユーモアもある。好きだ