0

テキストをタイプライター風に表示するiTyped.js

テキストをタイプライター風に表示するiTyped.js

サービスのコンセプトや企業の理念など、テキストに動きをつけることでメッセージ性を高く表現することができます。そのなかでも、タイプライター風に文字(テキスト)を一文字ずつ入力しているような表現を、JavaScriptのプラグインを利用して実装する方法をご紹介いたします。

ちょっとした動きで見る人にワクワクするような感覚を与えることができるので、視覚的に伝えたいメッセージを表示する際に使えそうですね。

 

まずは、デモサンプルをご確認ください。

DEMO

このようなタイプライター風の動きを表現できるプラグインで、サンプルでは英語「Think different.」と日本語「固定概念をなくして発想を変えよう。」の2文を表示しています。
是非試してみてください。

JavaScriptのプラグイン「iTyped.js」を使用する方法になりますので早速見ていきましょう。

iTyped.jsをダウンロード

以下より「iTyped.js」をダウンロードします。

GET STARTED NOW!」ボタンでGitHubへ移動してください。

 

ダウンロードファイルを解凍し、「dist」の中の「index.js」または「index.min.js」を使用します。

CDNを利用する場合

以下のタグを読み込むことで利用できます。
ityped@1.0.3

HTMLを用意

サンプルとして以下のようなhtmlで実装していきます。
記述内容は適宜変更してみてください。

CSSを記述

公式でサンプルとして利用されているままのcssで実装してみます。

JSを記述

htmlの</body>タグ直前にスクリプトを記述していきます。「strings: [”]」の中に表示するテキスト本文を記述しますが、今回は2文を表示するように「,」で2つ記述してあります。

カスタム

以上で完成です。プレビューしてみてください。

まとめ

カスタマイズについては豊富ではありませんが、比較的簡単に実現できるのでアクセントに使用してみてもいいですね。
また、jQueryに依存していないため動作も早く不可も少ないので注意点も少ないと感じます。

 

 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > JavaScript > テキストをタイプライター風に表示するiTyped.js