ここでは文字にタイピングアニメーショーンをつける jquery.jaticker.jsを紹介していきます。

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

jatickerのダウンロード
http://www.otchy.net/javascript/jaticker/
otchy.net様

head内で読み込み

<link rel="stylesheet" type="text/css" href="jquery.jaticker_1.0.0.css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.jaticker_1.0.0.js"></script>

jquery.jaticker_1.0.0.css、jquery.jaticker_1.0.0.jsを読み込んでください。

script

$(function(){
    $('#jaticker').jaticker();
});

ターゲット指定してください。

html

<div id="jaticker">
    <ruby>緑の<rt>みどりの</rt></ruby><ruby>カバンに<rt>かばんに</rt></ruby><ruby>500万<rt>500まん</rt></ruby><ruby>入れて<rt>いれて</rt></ruby>
    <ruby>白の紙で<rt>しろのかみで</rt></ruby><ruby>黄色のカバン<rt>きいろのかばん</rt></ruby><ruby>言うて書いて<rt>いうてかいて</rt></ruby>
    <ruby>赤のカバン<rt>あかのかばん</rt></ruby><ruby>言いながら<rt>いいながら</rt></ruby><ruby>置いてくれたら<rt>おいてくれたら</rt></ruby>
    <ruby>俺黒のカバン<rt>おれくろのかばん</rt></ruby><ruby>言いながら<rt>いいながら</rt></ruby><ruby>取りに行くわ<rt>とりにいくわ</rt></ruby>
</div>

ルビを振ると変換している様なアニメーションがつきます。

カスタマイズ

jquery.jaticker_1.0.0.js (77～85行目)

opt: {
    'inputSpeed': 60,       // アニメーション速度
    'convertSpeed': 120,    // 変換アニメーション速度
    'autoStart': true,      // 自動的に開始するか
    'cursorStr': '|',       // カーソルの文字列
    'cursorInterval': 500,  // カーソルの点滅速度
    'hideCursor': false,    // カーソルを隠すか
    'leaveCursor': false    // アニメーション完了後カーソルを消すか
}

お好みにアニメーションをカスタマイズできます。

ここでは色を選択する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>

ここでは画面クリックでわっかを表示jQuery pointerの紹介をしていきます。

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

pointer.jsのダウンロード
http://nejimaki-act.com/lab/pointer/
nejimakiact様

head内で読み込み

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

pointer.jsを読み込んでください。これだけでわっかが表示されるようになります。

カスタマイズ

pointer.js

var settings = {
    size : 130,
    spd : 500,
    color : "#ffc3dd"
}
settings = $.extend(settings, options);

var circle_style = {
    "position":"absolute",
    "z-index":9999,
    "height":10,
    "width":10,
    "border":"solid 4px "+settings.color,
    "border-radius":settings.size
}

サイズ、スピード、色を設定できます。
var settings = {} 内をお好みに設定してください。