html & css

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

html-css-object-scroll-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

コード animation-play-state: paused;
プロパティ animation-play-state
paused アニメーションを一時停止する

1-3.参考サイト

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

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

2.最後に

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

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です