ここでは色を選択するjQuery ColorPickerプラグインを紹介します。

デモはこちら
https://office-goto.info/demo/colorpicker/

ColorPicker – jQuery pluginのダウンロード
http://www.eyecon.ro/colorpicker/

head内で読み込み

<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>

colorpicker.css、colorpicker.jsを読み込んでください。

script

$(function(){
    $('#picker').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
            $('body').css({'backgroundColor' : '#' + hex});
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function() {
        $(this).ColorPickerSetColor(this.value);
    });
});

html

<input type="text" id="picker" value="ffffff">

今回は例としてtextをクリックしたらColorPickerが出てくるように設定して
ColorPickerで色を選択したら背景色を変更しています。

ここではbox2d-jqueryプラグインの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/box2d/

ダウンロードはこちら
https://github.com/franzenzenhofer/box2d-jquery

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/lib/jquery.box2d.min.js"></script>

jquery.box2d.min.jsを読み込んでください。

script

$(function(){
    $("h1, p, #box").box2d({'y-velocity':5});
});

ターゲットで指定するだけです。
要素が多いとかなり重たくなってしまうので注意が必要です。

ここでは自作したlupin.jsの紹介です。

音声再生はjPlayerプラグインを使用しました。

jPlayerの実装はこちらで解説しています。
https://office-goto.info/javascript-jquery/jplayer/

デモはこちら
https://office-goto.info/demo/lupin/

lupin.js

$(document).ready(function(){
    $("#player").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "js/type.mp3"
            });
        },swfPath: "js"
    });

    $('.box').hide();
    $('.box_after').hide();
});

var timer;      // タイマーオブジェクト
var title;      // タイトル
var arrTitle;   // タイトル配列
var i = 0;      // カウント
var length = 0; // 最大カウント

function lupinAction(str) {
    $('.box').show();
    $('a').hide();
    $('h2').hide();
    title = str;
    arrTitle = str.split('');
    length = arrTitle.length;
    timer = setInterval("lstart()", 300);
}
function lstart(){
    $("#player").jPlayer('stop');
    $("#player").jPlayer('setMedia', {
        mp3: "js/type.mp3"
    }).jPlayer('play');
    $('.box').text(arrTitle[i]);
    i++;
    if (length == i) {
        setTimeout(function(){
            $("#player").jPlayer('stop');
            $("#player").jPlayer('setMedia', {
                mp3: "js/title.mp3"
            }).jPlayer('play');
            clearInterval(timer);
            $('.box_after').show();
            $('.box_after').html('<p>' + title + '</p>');
            setTimeout(function(){
                $('a').show();
                $('h2').show();
                $('.box').hide();
                $('.box').empty();
                $('.box_after').hide();
                $('p').remove();
                i = 0;
                length = 0;
                arrTitle = null;
                title = null;
            },4000);
        },300);
    }
}

lupin.css

#lupin .box{
    position: absolute;
    width:500px;
    height:440px;
    margin-left:-250px;
    margin-top:-220px;
    top: 50%;
    left: 50%;
    background-color:#000;
    font-size: 430px;
    font-family: ＭＳ 明朝;
    color:#fff;
    text-align: center;
    line-height: 440px;
}
#lupin .box_after{
    position: absolute;
    width:500px;
    height:440px;
    margin-left:-250px;
    margin-top:-220px;
    top: 50%;
    left: 50%;
    background-color:#000;
}
#lupin p {
    width:500px;
    height:440px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    font-size: 60px;
    font-family: ＭＳ 明朝;
    color:#fff;
}

html

<div id="lupin">
<ul>
<li><a href="" onclick="lupinAction('ルパン三世颯爽登場'); return false;">ルパン三世颯爽登場</a></li>
<li><a href="" onclick="lupinAction('死んでゆくブルース'); return false;">死んでゆくブルース</a></li>
<li><a href="" onclick="lupinAction('シッパイ大作戦'); return false;">シッパイ大作戦</a></li>
<li><a href="" onclick="lupinAction('集まれ奇人ども'); return false;">集まれ奇人ども</a></li>
<li><a href="" onclick="lupinAction('ルパンの法則'); return false;">ルパンの法則</a></li>
<li><a href="" onclick="lupinAction('盗っ人ゲーム'); return false;">盗っ人ゲーム</a></li>
<li><a href="" onclick="lupinAction('ストレート・フラッシュ'); return false;">ストレート・フラッシュ</a></li>
<li><a href="" onclick="lupinAction('イヌも歩けばルパンにあたる'); return false;">イヌも歩けばルパンにあたる</a></li>
<li><a href="" onclick="lupinAction('さらば愛しきルパン！'); return false;">さらば愛しきルパン！</a></li>
<li><a href="" onclick="lupinAction('バカボン一家がサヨウナラ'); return false;">バカボン一家がサヨウナラ</a></li>
</ul>
<div class="box"></div>
<div class="box_after"></div>
<div id="player"></div>
</div>