CSS・JavaScript・GIFアニメーションやVideoタグの動画の止め方

CSS・JavaScript・GIFアニメーションやVideoタグの動画の止め方

確認のためWebサイトで動いているものを止める

Webサイトを作成していると確認のため動きを止めたい箇所がある。

CSS・JavaScript・GIFアニメーションやVideoタグの動画などだ。

Chromeデベロッパーツールを使用すればこれらの動きを簡単に停止させることが可能だ。

CSSアニメーションの止め方

CSSアニメーションを止めるにはChromeデベロッパーツールのAnimationsの停止ボタンをクリックするだけでよい。
CSSアニメーションを止めるにはChromeデベロッパーツールのAnimationsの停止ボタンをクリック

この方法だとすべてのCSSアニメーションを停止させてしまうため1箇所のみ停止させたい場合は該当箇所にanimation-play-state: pausedを追加します。
すべてのCSSアニメーションを停止させてしまうため1箇所のみ停止させたい場合は該当箇所にanimation-play-state: paused

CSSで:hover時の止め方

CSSで:hoverのときに表示する要素を:hoverの状態で停止させたい場合は要素を右クリックして:hoverを選択する。
CSSで:hover時の止め方

CSS疑似要素:hoverの表示サンプル

JavaScriptでclass="on"が付いたときの止め方

マウスオーバーのときに非表示部分にclass="on"などを付けて表示している場合はonなどを直接class属性に追加して表示させる。

属性変更時に停止させて表示させたい場合は要素を右クリックしてBreak on => attribute modificationsで属性変更時に停止させる方法もある。

Break on => attribute modificationsで属性変更時に停止させる

JavaScriptでclass="on"が付けられて表示されるサンプル

JavaScriptアニメーションの止め方

JavaScriptアニメーションはConsoleにdebuggerと打ち込むと停止します。

個別に停止したい場合はdebuggerで停止後にアニメーションに使用されているプロパティの初期値を!important付きで指定する

例えば下記のJavaScriptアニメーションのサンプルはleft値を初期値0の状態からleft値を増やすことでアニメーションにしているため、debuggerで停止後、left: 0 !importantを指定することで個別に停止できる。
debuggerで停止後、left: 0 !importantを指定することで個別に停止

JavaScriptアニメーションのサンプル

GIFアニメーションの止め方

GIFアニメーションはConsoleでdebuggerを実行すると停止できる。
GIFアニメーションはConsoleでdebuggerを実行すると停止できる

debuggerは本来JavaScriptを停止してデバッグの際に使用するものだがGIFアニメーションの停止にも使える。

Videoタグの動画の止め方

videoタグ部分を右クリックするとコントロールを表示という項目が表示されるため、これを有効にして停止ボタンを表示させて止める。
videoタグ部分を右クリックするとコントロールを表示という項目が表示されるため、これを有効にして停止ボタンを表示させて止める

ただし、videoタグのコントロールは無効化されていると右クリックから表示できないため、その場合はConsoleでvideoタグに対してpause()を実行して止める。

現在のYouTubeやニコニコ動画などはvideoタグが使用されているため、このコマンドを実行すると停止できる。

$$('video').forEach(x => x.pause());

逆に停止状態から再生したい場合はplay()を実行する。

$$('video').forEach(x => x.play());

iframe内のYouTube動画の止め方

動画ファイルは容量が大きいため動画はYouTubeにアップロードしてiframeで読み込んで表示させるケースがある。

例えばパナソニックの公式サイトではトップページでYouTubeから読み込んだ動画を表示させている。

iframeが使用されている場合はvideoタグで直接動画を再生しているわけではないためpause()で止めることはできない。

この場合は下記のiframe内に停止されるためのコマンドを送信すると止まる。

var opt = `{
 "event": "command",
 "func": "pauseVideo"
}`;
$$('iframe').forEach(x => x.contentWindow.postMessage(opt, '*'));

再生したい場合はpauseVideoをplayVideoに変えて再度実行すれば良い。