jQueryプラグイン「typist」の紹介
文字にアクセントを加えるためのjQueryプラグインになります。
プラグインのタイトルの通り「タイピスト」というのは、あたかもタイプライタで文字を打っているかのように表現できるプラグインになります。
設置も簡単ですので、TOPなどの文字にアクセントを加える際に使ってみてはいかがでしょうか。
設置方法
URLからデータをダウンロードしてご利用のテーマに加える方法かCDNで読み込むパターンがあります。
URLからダウンロードする方法
こちらからダウンロードを行います。
使用するファイルは「jquery.typist.js」または「jquery.typist.js」になります。
また、jQueryで動きますのでjQueryも読み込みます。
こちらはjQueryをCDNで読み込み、タイピスト本体をjsフォルダに置きhead内に読み込んだものとなります。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/js/jquery.typist.js"></script>CDNから読み込む方法
弊社ではワードプレスのfunctions.phpから読み込んでおります。なお、jQueryはダウンロードして使っており別のstyle.jsというものも読み込んでおります。
<?php
function theme_name_scripts() {
//jQueryの読み込み
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', false );
wp_enqueue_script( 'style-js', get_template_directory_uri() . '/js/style.js', array( 'jquery' ), '1.0.0', false );
//CDNの読み込み(typist)
wp_enqueue_script( 'typist', 'https://unpkg.com/ityped@1.0.3', array( 'jquery' ), '1.0.3', false );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>基本的な使い方
HTMLの編集
タイプライタを使用したい箇所に以下のコードを加えます。
<span id="ityped"></span>spanタグで挟んだidのitypedを記載します。
jQueryの編集
以下のコードをstyle.jsに記載します。
jQuery(document).ready(function () {
ityped.init(document.querySelector("#ityped"), {
strings: ['to create...', 'provide service...', 'do management...', 'Mashiro Mirise !!'],
typeSpeed: 100,
backSpeed: 50,
startDelay: 3000,
backDelay: 2000,
loop: false,
showCursor: true,
placeholder: false,
disableBackTyping: false,
cursorChar: "|",
onFinished: function () {},
});
});コピペで一通り稼働しますが、タイプライタで表示される文章は随時変更してください。
オプションについて
| strings: ['ageage', 'hogehoge'], | 表示するテキスト |
| typeSpeed: 100, | タイピング速度 |
| backSpeed: 50, | カーソルが戻る速度 |
| startDelay: 500, | 入力が始まるまでの時間 |
| backDelay: 500, | カーソルが戻る時間 |
| loop: false, | ループさせるか |
| showCursor: true, | カーソルを表示させるか |
| placeholder: false, | プレースホルダーに文字を書き込むか |
| disableBackTyping: false, | 戻る際の処理を入れるか |
| cursorChar: "|", | カーソルとして表示するテキスト |
おわりに
弊社ではこのタイピングをTOPの見出しに入れています。
しかしながらそこの一か所にだけしか使っていないので勿体ない気はしますが…。
他の箇所にも入れてみるように検討してみましょうかね。
アニメーションさせる文字の指定はjQueryからとなりますので、ワードプレスの記事詳細のタイトルを取得して表示させることはjQueryの深い知識がないと実現させるのもなかなか難しいかもしれません。
それでは、あなたに合った素晴らしいWebサイトをLet’s Enjoy!!
