【HTML & CSS】マウスオーバーでスクロール要素を一時停止させるコード【animation-play-state】

コードの書き方が分からず、検索してやりたいことができそうなサイトを見つけたものの、コードが複雑で結局諦めてしまう、または理解するのにとても時間がかかってしまうことがあると思います。(私はよくあります。)
本シリーズでは、理解しやすいよう、出来るだけシンプルなコードを記載しています。
また、参考サイトとして、私がいくつかのサイトを検索した結果、わかりやすいサイトを選んで紹介させてもらっています。

今回はスクロールする要素をマウスオーバーする事で一時的にスクロールを止めるコードです。要素をスクロールさせるコードはこちらの記事を参照ください。

目次

1.マウスオーバーでスクロール要素を一時停止させるコード

1-1.シンプルなコード

1-2.コードの説明

1-3.参考サイト

2.最後に

1.マウスオーバーでスクロール要素を一時停止させるコード

1-1.シンプルなコード

スクロールするp要素のテキストにマウスオーバーすると、一時停止させるコードです。
下のスクロールしている「スクロールする要素」のテキストにマウスカーソルをあわせると、スクロールが一時停止します。

See the Pen
html-css-object-scroll-animation-play-state by zaisube (@zaisube)
on CodePen.

1-2.コードの説明

説明は目安として、プロゲートの範囲外のものに限定しています。

CSS

1-3.参考サイト

設定値のバリエーションなどは下記サイトを参照ください

○animation-play-state
https://into-the-program.com/keyframes-animation-paused/

2.最後に

分かりにく記述や、誤り等あれば、お問合せフォームやTwitter等からご連絡いただけると幸いです。
また、本記事に無い疑問などもお待ちしています。

ABOUT ME

zaisube

自動車部品メーカーで設計業務をしています。 この100年に一度と言われる大変革期を機に、会社にぶら下がっているだけではダメだと、スキルを付けるべくプログラミング、ブログを始めました。