ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse

10月1日の消費税増税に合わせ、キャッシュレス決済で支払うと金額の最大5％を国がポイントで還元する「キャッシュレス・消費者還元事業」が始まりますが、この事業をPRする公式Webサイトから「加盟店一覧はこちら」をクリックすると、即座に3608ページという膨大なPDFファイルに飛ばされてしまうことがちょっとした話題になっています。長い。 国の「キャッシュレス・消費者還元事業」公式サイトの消費者向けページ。「使えるお店を探す」から加盟店一覧を確認できます 同事業は、増税後の消費刺激策に加え、キャッシュレス化の促進を図るもの。ポイント還元対象のキャッシュレス決済サービスで支払うと、中小の小売店や飲食店などなら5％、大手企業が展開するコンビニエンスストアや飲食店のフランチャイズ店なら2％を、国がポイントで還元する仕組みですが、20年6月までの時限措置です。 これをPRするのが「キャッシュレス・消費者