要素が画面に入ったら、透明な状態から、少し下の位置からせり上がるように表示するフックを作りました。ページを読み進めるにつれて、カードなどを1つずつフェードインさせたいときに使えます。一度表示したら消さない作り方、横に並んだ要素を順に出 ...

スクロールで動画が画面から外れたら一時停止し、戻ってきたら続きを再生するフックを作りました。ユーザーが自分で止めた動画は勝手に再生しないこと、play() が中断されたときのエラーの受け方も確かめています。

画面の上に残るヘッダーを CSS の position: sticky で作り、上に着いたときだけ影を付ける処理を React と IntersectionObserver で書きました。固定されないときに見直す3つの点も、検証環境で ...

React で、いま読んでいる節の見出しを目次で強調する方法です。IntersectionObserver で、見出しが固定ヘッダーの下端を通り過ぎたときだけ位置を計算し、上へ戻ったときや途中から開いたときもずれないようにします。

一覧の最後に目印の要素を置き、IntersectionObserver で見張ると、目印が見えたときに次のページを読み込めます。React の useEffect での書き方を確かめ、見張りを1回だけ作る書き方で起きる2つの失敗も調べ ...