旅行HOMEJavaScriptiTyped.jsでタイプライター風のテキストアニメーションを簡単に実装するiTyped.jsでタイプライター風のテキストアニメーションを簡単に実装する2020.02.08JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では「iTyped.js」というJavaScriptのプラグインを使用して、タイプライター風のテキストアニメーションを実装する方法をご紹介しています。jQueryを使用しないプラグインなので動作が軽いのが特徴です。指定できるパラメータは多くはないですが、シンプルにタイプライター風のテキストアニメーションを実装したい場合に活躍するかと思います。下記は「iTyped.js」を使用して作成したデフォルト表示のサンプルです。カーソルの点滅アニメーションが良いアクセントになっていますね。CodePen.本記事では「iTyped.js」の基本的な使い方と指定することができるパラメータについてご紹介していきたいと思います。本記事の内容iTyped.jsのプラグイン本体をダウンロードするタイプライター風のテキストアニメーションを実装するその他指定可能なパラメータについて最後にでは、解説していきます。iTyped.jsのプラグイン本体をダウンロードするiTyped.jsのプラグイン本体は下記のURLからダウンロードすることができます。NOW!」と記載されたボタンがあります。クリックするとGitHubのページに飛びますので、そちらからプラグイン本体をダウンロードしてください。ダウンロードしたファイルを展開すると、中に「dist」と書かれたディレクトリがあります。中にある「index.js」または「index.min.js」がプラグイン本体です。どちらかを読み込むことでタイプライター風のテキストアニメーションを実装することができます。CDNも用意されているプラグイン本体をダウンロードする方法もありますが、公式でCDNが用意されています。動作確認程度であればCDNでも問題ないかと思います。本記事公開時点で最新のバージョン「ityped@1.0.3」になります。下記にCDNを読み込むタグを記載しておきますので、CDNを利用される場合にご活用ください。src="https://unpkg.com/ityped@1.0.3"></script>タイプライター風のテキストアニメーションを実装するでは、タイプライター風のテキストアニメーションを実装していきたいと思います。HTMLHTMLではプラグイン本体の読み込みとテキストアニメションを表示する要素を記述します。id名は適宜変更してご使用ください。(その際は以降のセレクターもご変更ください。id="ityped"></span>CSS続いてCSSを記述します。下記は公式で記載されている点滅カーソルアニメーションのスタイルです。こちらも使用するCSSに追加しておきます。}}JS最後にスクリプトを記述して完成です。スクリプトは「</body>」の直上に追加します。下記はデフォルトの状態で「iTyped.js」を使用する場合のサンプルです。冒頭でご紹介したデモと同じアニメーションを実装することができます。Program!']})その他指定可能なパラメータについてデフォルトでも素敵なアニメーションを実装することができますが、細かい設定も可能なところがプラグインの良いところです。下記でiTyped.jsで指定することができるパラメータをずらっとご紹介しています。詳細はコメントに記載していますので、カスタマイズしてご使用ください。function(){},}最後にいかがでしたでしょうか。iTyped.jsはjQueryに依存しないプラグインのため動作が軽く、また実現できることが決まっている分、導入を検討しやすいプラグインになっているかと思います。タイプライター風のアニメーションを実装される場合に使用されてみてはいかがでしょうか。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。