CSS Scroll-Driven Animationsで進捗バーのJSは消せた。view()への移行はキルスイッチに阻まれた
clvr.lolのスクロール進捗バーをanimation-timeline: scroll()に置き換えてJSを削った実録。view()でのフェードイン移行は演出キルスイッチとの相性で見送り。@supportsとprefers-reduced-motionを含む実装例つき。
open →CLVR — Web制作・AI活用・副業の実践テックブログ
clvr — zsh
matoshi@clvr:~/blog$
- articles
- 166
- categories
- 4
- author
- matoshi
- clock
- --:--:--
matoshi@clvr:~/blog$
新着記事
cat ./all →- #AI活用 Haiku 4.5と4o mini、技術ブログ運用の月額APIコストを実測で比べた NEW
- #Web制作 Astro 5.2 の Server Islands で通知バッジを作り、SSE でリアルタイム更新した NEW
- #AI活用 技術ブログ1本の裏に何回APIを叩いているか、HaikuとSonnetで数えた NEW
- #AI活用 Vision APIにコード画像を渡してバグを自動検出するスクリプトを書いた NEW
- #Web制作 Astro の HTML ストリーミングでレンダリング速度を改善する実装パターン
- #Web制作 AstroでISR的なキャッシュ戦略を組んで、更新頻度の違うページを捌いた話
- #ツール比較 「diff オンライン」のツールに業務テキストを貼るのが怖くて、ブラウザ完結のdiffツールを自作した話
- #ツール比較 無料QRコード作成サイトの「有効期限切れ」の正体を調べたら、自分で作ることにした
- #Web制作 unixtimeが秒かミリ秒か毎回迷うのに疲れて、桁数で自動判定する日時変換ツールを作った
- #Web制作 本番のJWTをデコードサイトに貼りかけて手が止まった。だから送信しないJWTデコーダを自作した