押したくても押せない「うざいボタン」をjQueryで作ってみました | Select *
Web Web制作

押したくても押せない「うざいボタン」をjQueryで作ってみました

uzai-button2オハヨウゴザイマス!
休日の半日を使ってくだらないことをしていた@deepblue_willです。

ボタンは押すためにあるものですが、押したくても押せないボタンをノリで作ってみました。
暇つぶしに見てみてください。



デモ

ブログのネタ8割、jQueryの勉強2割のために作ったのがこのボタンです。
まずはこちらのページでうざさを味わってみてください。
一見ただのボタンに見えますが、クリックしようとするととたんにウザさを味わうことになります。
ぜひクリックできるまで頑張ってみてください。
クリックできたらちょっとしたご褒美がありますよ!

間違ってもjavasriptを無効にしたり、ソースを覗いてURLを直で指定するなんてズルはしないように!
ひと通りウザさを味わってもなお、心に余裕のある方は次も読んでいただけると嬉しいです。

解説!

さて、このうざいボタンの解説をさせていただきます。

デモページでひとしきり遊んでもらった方はわかると思いますが、このボタンはクリックしようとすると逃げます
これだけでもウザいのにさらにウザいことに、
  • メッセージでウザさをさらに煽る
  • uzai-button2uzai-button1
  • たまに分身してウザさが2倍、3倍になる
  • uzai-button3
という仕様になっております。

一応、コードの説明をさせていただきます。
$(function(){
    var msgAry = [
        "ダッシュ!≡≡≡ヘ(*--)ノ",
        "(((((((/;_;)/ ヒィィイイー!!",
        "(((((・_・;)",
        "((((((^_^;)ニゲヨッ",
        "εε= κ( ` ▽´)κケケケ"
    ]

    $(".uzai-btn").on('mouseenter', function() {
        var rndMsg = Math.floor(Math.random() * 5);
        var rndClone = Math.floor(Math.random() * 11);
        var rndBottom = Math.floor(Math.random() * 81);
        var rndLeft = Math.floor(Math.random() * 81);
        
        var btnGroup = $(this).parents(".uzai-group");
        btnGroup.animate({
            "bottom": rndBottom + "%",
            "left": rndLeft + "%"
        }, 100);

        var msgBox = btnGroup.find(".uzai-msg");
        msgBox.text(msgAry[rndMsg]);
        msgBox.show();

        if (rndClone == 0) {
            var cloneMsg = "分身!((((-(-o()o-)-))))"
            var cloneGroup = btnGroup.clone(true);
            var clRndLeft = rndLeft
            
            cloneGroup.find(".uzai-msg").text(cloneMsg);
            msgBox.text(cloneMsg);
            if (clRndLeft >= 65) {
                clRndLeft = clRndLeft - 15;
            }else{
                clRndLeft = clRndLeft + 15;
            };
            cloneGroup.css({
                "bottom": rndBottom + "%",
                "left": clRndLeft + "%"
            });
            $("#container").append(cloneGroup);
        };
    });
});


やっていることは簡単でポインタが来たらMath.random()で適当に乱数を生成して、animate()で適当な場所にうごかしたり、メッセージを表示したり、分身させたりしてます。

Math.random()0 〜 1未満の数字をランダムに生成するメソッドです。
これ単体では0.44554901542142034とか使い勝手の悪い小数点の数がでてきてしまいます。
なので、掛けたり、丸めたりして使ってます

今回はボタンが逃げる位置(bottom、left)、ランダムなメッセージの生成、分身を行う確率の作成で使用しました。

で、今回のキモとなるメソッドがanimate()というjQueryのメソッド。

このメソッドは、JSONと数字を渡すことで要素をアニメーションすることができます。
今回の例では乱数で生成したbottomとleftの値を渡して、100ミリ秒かけてアニメーションさせてます。

最後

このうざいボタンですが、たまに逃げが甘いときがあるのでその時にクリックできます。
ほんとは近くには逃げないように制御をいれようとも思ったのですが、あまりの押せなさぶりに作ってるこっちまでイライラしたので、クリックできる余地を残しました。

まぁこんなボタン、実際のつかわれることはまずないと思いますが、一応ソースはGitHubで公開してます。
さて、次はどんなふざけたUIをつくろうか。。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)
  • Popular Posts