Help us understand the problem. What is going on with this article?

2020年はねずみ年!画面にねずみが侵略してくるブックマークレットを作った!

クソアプリ2カレンダー11日目担当、@issy_s16です!
自称ほっこり箸休め担当、よろしくお願いします!

🧀 ねずみが侵略!ブックマークレット

Image from Gyazo

今年ももう終わりますね、、2020年はねずみ年です。
ということで!今回は 画面にねずみが侵略してくるブックマークレット を作りました!

👾 遊び方

1️⃣ 以下の画像の参考にソースコードをURLとしてお気に入りに追加してください!

Image from Gyazo

bookmarklet.js
javascript:(function(a){var b=document.createElement("script");b.src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";b.onload=function(){a(jQuery.noConflict(!0))};document.body.appendChild(b)})(function(a){a("img").attr("src","https://bit.ly/36oKggr").hover(function(){for(var b=Math.floor(2*Math.random()),c=0;c<=b;c++)a("body").after('<img src="https://bit.ly/2P3SrJn" class="mouse" style="position: absolute; width:70px; top: -50px; left:-50px; z-index: 99999;">');var d=a(this).offset(),e=a(this).height(),f=a(this).width();a(".mouse").each(function(b,c){var g=d.top+Math.floor(Math.random()*e),h=d.left+Math.floor(Math.random()*f);a(c).animate({top:g,left:h},800*Math.random()+200,"swing")})})});
2️⃣ 好きなサイトを開いた状態で、お気に入り登録したブックマークレットを開いてください!
3️⃣ すると、画面上のimgタグが全てチーズに置き換わりますので、チーズにマウスオーバーすることでねずみ(マウス)がわらわら追っかけてきます!

ねずみだけにマウスオーバーっていうただのオヤジギャグです。

📑 圧縮してないソースコード

bookmarklet.js
(function(func) {
  var scr = document.createElement("script");
  scr.src = "//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
  scr.onload = function() {
    func(jQuery.noConflict(true));
  };
  document.body.appendChild(scr);
})(function($) {
  $('img')
    .attr('src', 'https://bit.ly/36oKggr')
    .hover(function(){
      var rand = Math.floor( Math.random()*2);
      for (var i = 0; i<=rand; i++) {
        $('body').after('<img src="https://bit.ly/2P3SrJn" class="mouse" style="position: absolute; width:70px; top: -50px; left:-50px; z-index: 99999;">');
      }

      var offset = $(this).offset();
      var height = $(this).height();
      var width = $(this).width();

      $('.mouse').each(function(i, elm){
        var top = offset.top + Math.floor( Math.random()*height);
        var left = offset.left + Math.floor( Math.random()*width);
        $(elm).animate({top: top, left: left}, Math.random()*800+200, 'swing');
      })
    });
});

https://github.com/issy-s16/2020-cheese-transformer

💪 こだわった点

ねずみには1体ごとにそれぞれ違うアニメーションタイムで動くように設定してます!
また、アニメーションのeasingにswingを設定、対象のチーズの要素の大きさを取得した上でランダム配置、
そして、あえてイベントをストップせず残すことでわらわら感を演出しました!

👏 感想

アプリでもブックマークレットってそんなに使う機会は多くないですよね:thinking:
でもこんな風に簡単にJSを動かすことができるので、改めてブックマークレットの便利さ面白さを再認識する良い機会になりました!

プライベートでも仕事でも、使える技術は使って自動化していきたいものですね!

来年も良い年になりますように!

☺️ スペシャルサンクス

いつもありがとうございます いらすとやさん!

issy_s16
えんじにゃ https://twitter.com/issy_s16
https://issys16.info
gig-inc
クリエイティブとテクノロジーでセカイをより良くする スタートアップ企業
https://giginc.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした