typed.js を使用してアニメーションのタイピング効果を作成する方法

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

Typed.js は、Java スクリプトおよびその他のスクリプト言語をサポートするアニメーション ライブラリです。テキストに入力アニメーション効果を提供します。 CDN リンクをライブラリに追加するか、Node Package Manager (NPM) または Yarn を使用してインストールすることで、ライブラリを使用できます。任意の段落またはタイトルで入力アニメーションを備えた Web ページを提供します。したがって、typed.js の入力アニメーション効果について詳しく学ぶ必要があります。アニメーションを使用するために、types.js は 2 つのパラメーターを入力として受け入れる typed() というコンストラクターを提供します。 ＃＃＃文法＃＃＃

コンストラクター型のオブジェクトを作成するための構文は -

です。 リーリー

上記の構文では、クラスまたは ID は、入力アニメーションが動作するターゲット要素です。コールバック関数は、文字列型の配列と、入力速度、戻り速度、ループ、戻り速度の遅延などのいくつかの型コンストラクター プロパティを持つ関数です。

＃＃＃アルゴリズム＃＃＃

ステップ 1

−

テキスト エディタで HTML ファイルを作成し、それに HTML ボイラープレートを追加します。

ステップ 2

− typed.js CDN リンクを HTML ドキュメントの head タグに追加します。 リーリー

ステップ 3

− 次に、「typed-text」という ID 名で div コンテナを作成します。 リーリー

ステップ 4

− body タグの終わりの前に script タグを作成します。 リーリー

ステップ 5

− 型指定されたコンストラクターをインスタンス化し、オブジェクトを作成して参照変数に保存します。 リーリー

ステップ 6

− 2 つのパラメーターを要素の ID 名として型付きコンストラクターに渡し、文字列リテラルと入力速度を含む関数を渡します。タイプスピードとして。 リーリー

ステップ 7

− ブラウザでindex.htmlファイルを開くと、ターゲットテキストに入力アニメーションが表示されます。 ＃＃＃例＃＃＃ この例では、typed.js を使用して、テキスト内の入力アニメーションを作成します。

リーリー

下の画像は、上記の例の出力を示しており、ブラウザ画面上のテキストが表示されています。ユーザーがブラウザでこの HTML ファイルを開くと、リアルタイムで動作する入力アニメーションが表示されます。 ＃＃＃結論は＃＃＃ typed.js を使用する場合は、型オブジェクトを正しく初期化するための構文を確認して作成する必要があります。構文にエラーがあると、アニメーションが正しく動作しません。型コンストラクターで渡されるコールバック関数の値を変更することで、ニーズに合わせて入力速度と待ち時間をカスタマイズできます。

以上がtyped.js を使用してアニメーションのタイピング効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。