SRC遊んだり書いたり。時々プログラミング

SRCの感想とか技術解説とか、そんな感じのアレ！

jQueryで昔のファイナルファンタジー某のプロローグのようなテキストフェードインを実装するチュートリアル

CSS3 jQuery

こんにちは！

今日はファミコン時代のあのゲームのようなエフェクトを実装するチュートリアルをご紹介します。

デモ

実装する手順

jQueryの読み込み

jQueryを使用するので、Google AJAX Libraries APIからjQueryを読み込みます。
HTMLの<head>内に次の行を追加してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

HTML

デモのように各行毎にフェードインを実装するには、それぞれの行毎に<span>タグで囲い、<br>タグで改行します。

<p>
    <span>むかーし　むかし　あるところに</span><br>
    <span>おじいさんと　おばあさんが　いました</span><br>
    <span>おじいさんは　やまへ　しばかりに</span><br>
    <span>おばあさんは　かわへ　せんたくに　いきました</span><br>
</p>

フェードインの対象となる要素はjQueryのセレクタで指定するので、<h3>要素などの見出しや画像にもフェードインを適用できます。

JavaScript

var DELAY_SPEED = 1750;//読み込みの遅延時間
var FADE_SPEED = 1750;//表示のアニメーション速度
$(document).ready(function(){//ドキュメントのオンロード時に実行
    $('span').each(function(i){//セレクタで指定した要素すべてに
        $(this).delay( i * DELAY_SPEED ).animate({opacity:'1'}, FADE_SPEED);//フェードインを適用
    });
});

セレクタで要素を指定し、それら全ての要素を、時間差でanimateを使い徐々に不透明にします。

CSS

初期状態は非表示（完全透明）に

フェードインの対象となる要素のopacityを0にし、完全に透明にします。*1

span{
    opacity:0;
}
要素を画面の縦横中央に表示する

CSS3で新たに追加されたdisplay:tableを用い、vertical-align:middleを有効にします（縦方向の中央寄せ）。
ここでは、HTML全体をtableに見立て、body要素をtableのセルとします。*2
ドキュメント全体が見かけ上tableと同様の扱いになるので、htmlとbodyの両方でheightとwidthを100%に指定します。

また、text-alignをcenterにし、テキストを水平方向でも中央寄せします。

html{
    display:table;
}
body{
    display:table-cell;
    vertical-align:middle;
}
html, body{
    text-align:center;
    height:100%;
    width:100%;
}
デザインを変更して仕上げ

全体のデザインを指定してCSSを仕上げます。
デモではWebフォントとして美咲フォントをお借りしました（ソースコードは無効なリンクに差し替えています）。

@font-face {/*WebFontの読み込み*/
    font-family: "MisakiGothic";
    src: url("Webフォントを置いたURL") format("Webフォントの拡張子");
}

html, body{
    font-family: "MisakiGothic";
    color: #fff;
	background-color:#00F;
	color:#FFF;
	line-height:2em;
    text-align:center;
    height:100%;
    width:100%;
}
html{
    display:table;
}
body{
    display:table-cell;
    vertical-align:middle;
}

span{
    opacity:0;
}

*1:注：display:hiddenにすると、フッタなどの下部の要素がはじめ上の方に表示されてしまう事があります。displayは操作しないようにしましょう。

*2:HTMLに余計な<div>を書かずに済みます。