最初 animations
このページのアニメーションを止める
点滅する見出しや、スクロールのたびに動く表示が読書の邪魔になることがあります。このショートカットは、開いているページの視覚効果を止めます。
パソコンで下のボタンをブックマークバーにドラッグします。その後、対象のページを開いてブックマークを使ってください。
このページのアニメーションを止めるスマートフォンをお使いですか? 下に別の使い方をまとめています。
仕組みと使いどころ
スマートフォンではどう使いますか?
コードをブックマークのアドレスとして保存する方法を試せます。まず下のコードをコピーしてください。
iPhone(Safari): 適当なページをブックマークし、そのブックマークを長押しして「編集」を選び、アドレスをコピーしたコードに置き換えます。
Android(Chrome): ページをブックマークします。ブックマーク一覧で横の三点メニューから「編集」を選び、アドレスをコピーしたコードに置き換えます。
変更したいページを開いて、そのブックマークを選びます。メニューから動かない場合は、アドレスバーにブックマーク名を入力し、表示された候補を選んでください。
動作はブラウザーやバージョンによって異なります。ページ側でこの方法がブロックされることもあります。
iPhoneでは「ショートカット」アプリも使えます
「ショートカット」アプリで「WebページでJavaScriptを実行」アクションを追加し、下のコードを貼り付けます。SafariのWebページ用に共有シートへの表示を有効にします。求められた場合は、ショートカットの設定でスクリプトの実行を許可してください。次にSafariで対象のページを開き、共有から作成したショートカットを選びます。
パソコンのコンソールではどう使いますか?
変更したいページを開きます。Chromeで Ctrl + Shift + J(Windows/Linux)または ⌘ + Option + J(Mac)を押し、下のコードをコンソールに貼り付けて Enter を押します。
効果は開いているページに適用されます。コンソールで実行する前にコードの内容を確認してください。ブラウザーが安全上の警告を表示する場合もあります。
規則は、すべての要素に animation: none と transition: none を求めます。箱の前後に描かれるものも含みます。サイトは変わりません。変わるのはあなたの画面だけです。
どの動きが止まりますか?
ボタンは、開いているページにスタイルの規則を足します。すべての要素に効きます。
規則は animation: none と transition: none です。動いていたもの、大きくなっていたもの、色が少しずつ変わっていたものは止まります。
規則がすでにあるとき、もう一度クリックしても重なりません。読み込み直すと、サイトはいつもの動きに戻ります。
保存して使う
ボタンをブックマークバーにドラッグします。動きが多すぎるページを開いて、ブックマークをクリックします。
ブックマークはブラウザに残ります。クリックしたページのたびに規則が入り、読み込み直すまで続きます。
動き続けるもの
動画、音声、スクロールはそのままです。止まるのは見た目のアニメーションとトランジションです。
ほかの人にはサイトがそのまま見えます。変化はあなたのブラウザの外に出ません。