目次
確認のためWebサイトで動いているものを止める
Webサイトを作成していると確認のため動きを止めたい箇所がある。
CSS・JavaScript・GIFアニメーションやVideoタグの動画などだ。
Chromeデベロッパーツールを使用すればこれらの動きを簡単に停止させることが可能だ。
CSSアニメーションの止め方
CSSアニメーションを止めるにはChromeデベロッパーツールのAnimationsの停止ボタンをクリックするだけでよい。
この方法だとすべてのCSSアニメーションを停止させてしまうため1箇所のみ停止させたい場合は該当箇所にanimation-play-state: pausedを追加します。
CSSで:hover時の止め方
CSSで:hoverのときに表示する要素を:hoverの状態で停止させたい場合は要素を右クリックして:hoverを選択する。
JavaScriptでclass="on"が付いたときの止め方
マウスオーバーのときに非表示部分にclass="on"などを付けて表示している場合はonなどを直接class属性に追加して表示させる。
属性変更時に停止させて表示させたい場合は要素を右クリックしてBreak on => attribute modificationsで属性変更時に停止させる方法もある。
JavaScriptでclass="on"が付けられて表示されるサンプル
JavaScriptアニメーションの止め方
JavaScriptアニメーションはConsoleにdebuggerと打ち込むと停止します。
個別に停止したい場合はdebuggerで停止後にアニメーションに使用されているプロパティの初期値を!important付きで指定する
例えば下記のJavaScriptアニメーションのサンプルはleft値を初期値0の状態からleft値を増やすことでアニメーションにしているため、debuggerで停止後、left: 0 !importantを指定することで個別に停止できる。
GIFアニメーションの止め方
GIFアニメーションはConsoleでdebuggerを実行すると停止できる。
debuggerは本来JavaScriptを停止してデバッグの際に使用するものだがGIFアニメーションの停止にも使える。
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に変えて再度実行すれば良い。