jQuery TypeItを使用したテキストアニメーションのコード入力

の jQueryとテキストのコンボ ウェブ上での制限はありません。ちょっとした創造性と適切なJavaScriptライブラリで、ほとんど何でも構築できます。.

そのようなライブラリの1つが それを入力する, 無料のjQueryプラグインとして構築されています。それはあなたが作成することができます 動的タイピングアニメーション それは信じられないほどリアルに見えます。あなたはアニメーションのためのあなた自身のイージングを構築するためにキーストローク間のカスタムポーズを定義することさえできます.

TypeItは100％無料でオープンソースで、 jQueryコミュニティ用のテキストツール. すべての資料はオンラインで入手可能であり、信じられないほど簡単に従うことができます。.

ただし、TypeItには 無料の個人ライセンス, 商用ライセンスは、残念ながらお金がかかります。しかし、あなたは永遠に無料の個人用ライセンスを使用することができます 期限切れにならない, だからあなたのすべての個人的なプロジェクトやあなたの個人的なウェブサイトにとってさえも素晴らしいリソースです。.

あなたは始めることができます 生のTypeIt JavaScriptファイルをCDNで追加する あなたのページのヘッダーへの権利。それからjQueryを追加し、テキストを書いて、それをすべて一緒に接続します。単純な!

通常は ページ上の特定のdivをターゲットにする そしてそれをテキストアニメーションのコンテナとして使います。これが サンプルコードスニペット これがどのように機能するかを説明します。

 $（ '。type-it'）。typeIt（strings：['これは私の文字列です！']）; 

によって カスタムオプションを渡す に それを入力する（） 機能は、あなたはタイピング速度を遅くし、一定の間隔で一時停止を追加し、さらにタイピング速度をアニメーションの途中で変更するために一定の間隔で設定をリセットすることができます.

できます これらのオプションをテストする 設定をいじるのに時間がかかる場合は、プラグインページに.

このテキストアニメーションビルダーは、このプラグインを使ってできることの完璧な例です。あなたはあなたもWebアプリを構築することができるほど多くのカスタムオプションを得ます, このプラグインを使う, に その場でアニメーションを作成する!

メインプラグインページには、また見つけることができます より高度なオプション あなたがコピーすることができるコードスニペットで下に向かって.

だから、TypeItをダウンロードして、それに打撃を与える！それがうまくいったら、それは本当にとても楽しいです。そして、あなたが開発者に何か質問や提案があれば、Twitter @amacarthurで彼と連絡をとることができます。.