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

CATEGORY : column

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

maincatch

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

作成準備

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

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

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

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

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

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

HTMLの記述

CSSの記述

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

javascriptの記述

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

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

contact_bana