llc.beReady

Art × Web Design

jQuery

文字を順番に動かすjQueryプラグイン「textillate.js」使い方

文字を動かす、jQuery

こんにちは、合同会社beReadyの奥山です。
最近はかなり暑くて、屋内の作業が多い僕は、わざわざ暑い日中に
外に散歩して、みるみる黒くなっていっています笑

さて、みなさんはウェブサイト制作を行うときや、
サイトデザインを見て、参考にしているときに、
文字が順番に動いてくるのを見たことがありませんか??
あれかっこいいですよねー!!

今回は文字を順番に表示したり、消したりできるjQueryプラグインの
「textillate.js」についてご紹介します。

デモページ

まずはtextillate.jsのデモページをご覧ください。

デモページ

textillate.jsの使うための準備

textillate.jsの使い方はまず3つのファイルをダウンロードするところから始まります。

必要なものはこちら。

①textillate.js
②letterring.js
③animate.css

これらのダウンロードURLを載せておきますので、
必要に応じて持っていない人はダウンロードしてください。

textillate.js
letterring.js
animate.css

なぜ3つも必要なのかというと、感覚的にお話しすると、
lettering.jsが、文字の1つ1つに時間差でエフェクトをかけるという仕事をします。

そのエフェクトの内容がanimate.cssというわけですね。
animate.cssに保存されているエフェクトの内容を時間差でかけると。

この一連の挙動を、textillate.jsで管理しているといった感じです。

もし間違っていたらご指摘ください笑

textillate.jsの使い方

まずはダウンロードした3つのファイルを各サーバーに
FTP経由でアップロードします。

大体は「js」とかいうフォルダがあるのでそこに入れるか、
自分でフォルダを作って入れればいいでしょう。

animate.cssはcssフォルダに入れる感じで。

そしたら、読み込んでいきます。

お使いのサイトのhead部分に

と記述して、(ここは人によってどこに保存しているか異なるので少し変わります。)
ファイルを読み込んでいきます。

説明は省いていますがjQueryの読み込みの後にtextillate.jsと
letterring.jsは読み込んでくださいね。

次は実際に動かすための記述をしていきます。

/headの直前に

これを記述します。
これがもっとも単純な記述の仕方ですね。

そして実際に効果をつけたい要素を記述していきます。

これで基本形は完成しました。
続いて効果をつけていきます。

効果には(animate.cssのことですね)はjs要素としてつけるのか、
あるいはdata要素としてつけるのか2つ種類があります。

js要素での使い方

js要素ではこのように記述していきます。

textillate.jsにはinとoutのタイミングがあり、
まあ単純に文字がどういう感じで入ってくるのか、
消えていくのかを指定することができるんです。

ここで注意が必要なのはoutのエフェクトをかけるときは
必ずloopがtrueになっていなければなりません。

loopがfalseの時はoutの効果は発動しないので注意してください。

data要素での使い方

data要素での使い方は動かしたい要素に
直接書き込んでいきます。

data要素に書き込む前に一応トリガーとしてjsも書いておく必要があるので、
まずそちらを書いていきましょう。

最初に書いた基本形と同じですね笑

これを書いたら直接data要素を書き込みます。

これで大丈夫です。
書き方としては

data-(inかoutかどちらの時でもないものは書かない)-(effectなのかdelayなのかshuffleなのか)

という書き方になります。
ちょっと見にくいですね笑

本当によく間違えるのですがdata要素ですからね??
date要素ではないですよw
綴りをよく確認して使ってくださいね!!

ではまた。

LEAVE A REPLY

*
*
* (公開されません)