ブラウザ：お気に入りに仕込む遊び技。ページを“重力モード”にするJavaScript

ブラウザに重力をかける

～ページが崩れ落ちるブックマークレット～

ブラウザの「お気に入り」は
普通はページを開くためのものですが、

実は JavaScriptを登録すると小さなツールとして使うことができます。

こうした仕組みは ブックマークレット と呼ばれます。

今回は遊びネタとして、

ページに“重力”をかけるブックマークレット

を作ってみます。

クリックすると、
ページ内の画像や要素が 重力で落ちるように動きます。

ちょっとした物理演算のような動きです。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{let id="__bm_dropimg__";let s=document.getElementById(id);if(s){s.remove();document.querySelectorAll("img").forEach((e,i)=>{e.style.transition="";e.style.transform="";e.style.position="";e.style.zIndex=""});return}s=document.createElement("style");s.id=id;s.textContent="img{transition:transform 1.2s ease-in,filter .3s!important}";document.head.appendChild(s);document.querySelectorAll("img").forEach((e,i)=>{setTimeout(()=>{e.style.transform=`translateY(${120+Math.random()*260}px) rotate(${Math.random()*90-45}deg)`;e.style.zIndex=9999},i*80)})})();