■ 最新の投稿

ブラウザ:ページに桜吹雪🌸を舞わせるブックマークレット(遊び技)

ページに桜吹雪を舞わせるブックマークレット

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

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

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

今回は少し遊びネタとして、

ページの上から桜の花びらが舞い落ちるブックマークレット

を作ってみます。

クリックすると、
ページの上から桜の花びらが降ってくるような表示になります。

見慣れたサイトでも、
急に春らしい雰囲気になります。

仕組み:ブックマークレット(Bookmarklet)

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

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

JavaScript:

javascript:(()=>{if(window.__bm_sakura_on){document.querySelectorAll(".__bm_sakura").forEach(e=>e.remove());window.__bm_sakura_on=false;return}window.__bm_sakura_on=true;for(let i=0;i<40;i++){let s=document.createElement("div");s.className="__bm_sakura";s.textContent="🌸";s.style.position="fixed";s.style.top="-50px";s.style.left=Math.random()*100+"vw";s.style.fontSize=(12+Math.random()*18)+"px";s.style.pointerEvents="none";s.style.zIndex=999999;s.style.transition="transform 10s linear";document.body.appendChild(s);setTimeout(()=>{s.style.transform=`translateY(${window.innerHeight+100}px) translateX(${(Math.random()*200-100)}px)`},50);setTimeout(()=>s.remove(),10000)}})();

手順:

① どんなページでもいいので、いったんお気に入りに登録する。

② 登録したお気に入りを右クリックして、「編集」をクリック。

③ 先ほど紹介した JavaScript をコピーする。

④ 名前を「桜吹雪」にして、URL欄に JavaScript を貼り付ける。

これで完成です。

たとえば、、Yahooのページを開いた状態でお気に入りをクリックすると

サクラがヒラヒラします。

動画:

🌸春ですね🌸


Comments

コメントを残す

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