jQuery

テキストをタイピングエフェクト風に出来るjQueryプラグインTyped.js使い方

typed-js

今回は、タイピングで文字を入力しているようなタイピングエフェクトを作成が出来るjQueryプラグイン【Typed.js】の使い方のご紹介です。
こちらのプラグインは、文字を実際にタイピングしているようなエフェクトを作成でき、英語だとタイピング風に見えるのですが、日本語だと漢字の変換がないので、少し違和感がありますが、まぁ全然利用出来ないとはないと思います。
また、指定文字を【,(カンマ)】で区切ることで、文字を増やすこともでき、エフェクトのスピード・ループ・バックスペースのスピードもオプションで変更が出来るようになっています。
実際に【Typed.js】を利用したデモサイトもありますので、ご覧ください。

デモサイト

実際に利用する場合は、下記より必要ファイルをダウンロードして下さい。

Typed.js

タイピングエフェクト【Typed.js】使い方

それでは、実際にTyped.jsの使い方をご紹介していきたいと思います。
実装する前に、こちらより必要ファイルをダウンロードしておいて下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【typed.js】をhead要素内に読み込みます。
ファイルの階層などは、ご自身の環境などに合わせて下さい。

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

HTML

次にHTML側ですが、文字をタイピングエフェクトで表示させたい要素にIDまたはクラスを付加しときます。

<span id="type"></span>

JavaScript

上記のHTMLでspan要素に付けたID名を指定します。
stringsの部分が、タイピングエフェクトで表示させる文字となります。
【,(カンマ)】などで区切ることで、文字を増やすことが出来ますし、<br>などを入力すると段落も可能です。
一応オプションも記載しておりますが、不要なのであれば、strings以外は削除して下さい。

<script>
    $(function(){
		$("#type").typed({
            strings: ["最初の文字だよ。", "2番目の^1000<br> 文字です","3番目の文字です。","4番目の^1000文字です。","最後の<br>文字なんです。"],
            typeSpeed: 100, //スピード
			startDelay: 0, //スタート時間
			backSpeed: 100, //バックスピード
			backDelay: 500, //バックスタート時間
			loop: true, //ループ
			cursorChar: "|", //カーソル
        });
    });
</script>

CSS

最後にCSSのanimationを利用して、カーソルの点滅のスタイルを記載します。

/*---------------------------------------------------------
  				タイピング カーソル
---------------------------------------------------------*/
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

上記まで、記載すれば実装完了となります。
こちらのタイピングエフェクトの【Typed.js】は、利用頻度としてあまりないと思いますが、文字を強調したい時や読ませたい時なんかに利用するといいかもしれませんね。

また、下記リンク先で実際に【Typed.js】を利用した現在稼働中のサイトですので、ご参考にどうぞ。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS css3-img-hover

CSS3を利用してマウスオーバーで画像を拡大や変化させる +α

NEXT img-caption-css

CSSのみで画像のキャプションをスライド表示する方法