jQueryプラグイン
Pocket

Typed.jsというjQueryプラグインを使ってみました。

流行っているわけではないと思いますが、こういう動きを見る機会がたまたま重なったので調べてみました。

もくじ
  1. ダウンロード
  2. 読み込み
  3. HTML
  4. JavaScript
  5. オプション

ダウンロード

公式サイトの「Download.zip」からファイル一式をダウンロードします。

Typed.js

読み込み

ダウンロードしたZipファイルを解凍し、distディレクトリ内にある「typed.min.js」を読み込みます。jQueryもダウンロードするなりして、読み込みしましょう。

<script src="jquery-3.1.1.min.js"></script>
<script src="typed.min.js"></script>

CSSに関しては必須で読み込むものはありません。

HTML

文字を動かしたいところにclassやidを指定しておきます。

<span class="element"></span>

JavaScript

stringsの中に出したい単語などを指定していきます。オプションもいろいろとあります。

$(function(){
  $(".element").typed({
    strings: ["ごもくごはん", "フランスパン", "てんぷらそば", "ぶっかけうどん", "めんたいこスパゲティ"],
    typeSpeed: 100,
    backSpeed: 150,
    loop: true,
    showCursor: false,
    cursorChar: "|"
  });
});

オプション

文字のスピードや表示間隔などいろいろなオプションが用意されています。よく使いそうなものだけピックアップしました。

$(function(){
  $(".element").typed({
    // 表示する単語の指定
    strings: ["ごもくごはん", "フランスパン", "てんぷらそば", "ぶっかけうどん", "めんたいこスパゲティ"],
    // 上記stringsではなく、htmlで表示文字を指定できます。詳しくはdownloadしたファイル内のコードを見るとわかります。
    stringsElement: document.getElementById('typed-strings'),
    // タイピングのスピード
    typeSpeed: 0,
    // タイピングが開始前の時間
    startDelay: 0,
    // 文字を消す時のスピード
    backSpeed: 0,
    // 文字のシャッフル
    shuffle: false,
    // 文字の削除が始まるまでの時間・間隔
    backDelay: 500,
    // 繰り返し
    loop: false,
    // 繰り返しの回数。nullだとずっと繰り返し
    loopCount: null,
    // タイピング時のカーソルを見せるかどうか
    showCursor: true,
    // タイピング時のカーソルの形
    cursorChar: "|"
  });
});

詳しくはGitHubのReadmeで。

Typed.js – GitHub

さいごに

簡単に実装できて便利なプラグインでした。

プロダクトを紹介するサイトなどで、特徴を伝える時にちょっとしたアニメーションで一工夫できそうですね。

Pocket

Category : Tag :