webフォントとjquery.typist.jsを使ってRPG風のテキスト効果を作成する方法

2015.4.3 (金)
maincatch

先週の記事サンプルで作っていたRPG風のテキスト効果を作成する方法をご紹介いたします。

作成準備

使用するファイルを下記からダウンロードされて下さい。

使用するフォント:8×8 ドット日本語フォント「美咲フォント」
使用するJQueryプラグイン:jquery.typist.js

webフォントの使用方法は先週の記事を参考にされて下さい。

JQuery本体とjquery.typist.jsの読み込み

ダウンロードが完了したらJQuery本体と「jquery.typist.js」のhtmlへの読み込みです。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.typist.js”></script>

例のごとく、必ずJQury本体は「jquery.typist.js」より先に読み込みをして下さい。

HTMLの記述

<div id=”wrap”>
<div id=”text_wrap” class=”myWebFontClass”>
<div id=”text_wrap_inner”></div>
</div>
</div>

CSSの記述

body{
 height:100%;
 background-color:#000;
margin: 0;
padding: 0;
position: relative;
min-width: 600px;
min-height: 400px;
}

#wrap{
 color:#fff;
margin: -200px 0 0 -300px;
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
border-radius: 15px ;
 -moz-border-radius: 15px ;
 -webkit-border-radius: 15px ;
 border:3px solid #fff;
}

#text_wrap_inner {
 margin:30px 30px 0 30px;
}

今回は画面の真ん中に角丸のBOXを作成しテキストを表示さていますので、少しCSSの記述が多いですが適宜作成されたい状況に応じて変更されて下さい。

javascriptの記述

jQuery(function($){
$(‘#text_wrap_inner’)//文字列を表示させたい要素
.typist({ speed: 12 })
.typistAdd(‘※どこからともなく声が聞こえる「おお…ニワカモノよこんなところであきらめるとはなにごとじゃ。もういちどそなたにチャンスをあたえよう」。\n’);
});

上記のコードを外部ファイルまたはHTML内部に<script>で記述されて下さい。これでOKとなります。

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!