textillate.jsで文字を動かす方法

CODE
スポンサーリンク
Toshi
Toshi
プログラミングを勉強しているなら「Hello World」という文字を一度はみたことがあるはず!これをかっこよくjsで動かしてみたいなー。と思ったのでtextillate.jsというJavaScriptのライブラリーを使ってみました。今回はその「textillate.js」の使い方について説明したいと思います!

今回解説していく内容は以下です!

 本記事の内容

・textillate.jsとは?
・Hello Worldって?
・textillate.jsの使用方法


スポンサーリンク

textillate.jsとは?

textillate.jsとは、テキストに動きつけるプラグイン(拡張機能)で実装も簡単なプラグインです。特徴としてはエフェクトやアニメーションの種類がとても多いくテキストに動きをつけたい方向けのプラグインです

実際に、textillate.jsの公式サイトで動きを確認することができます

Hello Worldって?

ここで、いったん余談ですが【プログラミングを勉強しているなら「Hello World」という文字を一度はみたことがあるはず!】と冒頭にお伝えしました。よく目にするHello Worldなんですが、1978年に発刊されたC言語の本「プログラミング言語C」に書いてあったのが起源とされています。

Hello World(こんにちは、世界)

プログラミングのチュートリアルで使用される定番の文字のためプログラミングを勉強するときはこの言葉はいやでもみなくてはいけないってことですね!

textillate.jsの使用方法

まずは必要なファイルを公式ページよりダウンロードします。

ダウンロードしたファイルより下記3つを使います。また、jQueryも読み込まないといけません!

jquery.textillate.js
jquery.lettering.js
animate.css

では、ここからは記述方法の説明をしたいと思います!

textillate.jsの記述方法

基本的には他のjsを読み込ませるのと一緒でhead内か外部JSとして下記のようにscript部分を記述すれば、イベントが実行されます。

オプション設定

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

See the Pen
Hello World(こんにちは世界)
by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

 

textillate.jsの動作確認を行うには、Rerunを押してみてください!テキストに動きがついているのがわかるかと思います!

まとめ

Toshi
Toshi

いかがでしたか?面白いですよね!JavaScriptにはいろいろなライブラリ(拡張機能)が存在しているので、実現したい内容にあったライブラリ(拡張機能)を選んで使用してみてください!

コメント