CSSまたはJavaScriptを使用してHTML要素をアニメーション化することは、ライブラリの助けのおかげで、今日では多かれ少なかれ簡(jiǎn)単な作業(yè)です。ただし、完全な既存の要素のみをアニメーションすることができます。

これは、段落で一語(yǔ)をアニメーション化したい場(chǎng)合は、単語(yǔ)を単一の要素（スパンなど）に包み、それに応じて配置する必要があることを意味します。

このような1つまたは2つのスパン要素しかない場(chǎng)合、これは大きな問(wèn)題ではありませんが、すべてのキャラクターを段落でアニメーション化したい場(chǎng)合はどうでしょうか。各文字について、スパンを作成する必要があります。これにより、多くの追加マークアップが追加され、テキストの編集が難しくなります。これがBlast.jsが存在する理由です。

キーポイント

blast.jsは、HTMLで単一の文字、単語(yǔ)、または文をアニメーション化できるjQueryプラグインです。これは、選択したテキストを単一の要素（スパンなど）にラッピングしてから、それらの要素をアニメーション化することで行います。
プラグインは、ラッピング要素を選択し、特定の単語(yǔ)やフレーズを検索して強(qiáng)調(diào)表示し、アニメーションの速度とスタイルを制御する機(jī)能など、多くのカスタマイズオプションを提供します。また、テキスト內(nèi)の既存の要素が削除または破損していないことを保証します。
blast.jsは強(qiáng)力ですが、すべてのユーザーが必要とするわけではありません。特にアニメーションテキストを必要としないユーザー。ただし、アニメーション化されたテキストが必要な場(chǎng)合は、Webページに動(dòng)的およびインタラクティブな要素を追加するための強(qiáng)力なツールになります。

blast.jsとは何ですか？

blast.jsは、個(gè)々の文字、単語(yǔ)、または文章をアニメーション化できるjqueryプラグインです。この記事では、blast.jsの使用方法を理解できるように、いくつかの例を示します。 blast.jsを使用して次の例を試すには、jqueryとblast.jsファイルが必要です。これは、blast.jsのプロジェクトWebサイトにあります。

前述のように、Blast.jsでは、文字、単語(yǔ)、または文の要素を作成することができますが、ライブラリはこれらのオプションに限定されません。次のセクションでは、いくつかのオプションを紹介するためのいくつかの具體的な例を示します。表示されるオプションのリストは、利用可能なオプションの完全なリストがプロジェクトのWebサイトにあります。

最初のテキストをアニメーション化します

この最初の例では、タイトルをアニメーション化し、キャラクターごとに適切なキャラクターに移動(dòng)します。必要な唯一のHTMLコードは次のとおりです

jqueryとblast.jsを含めた後、このセクションの次のコードはすべてjqueryの準(zhǔn)備ができたハンドラーのカスタムJavaScriptファイルにあり、ページの準(zhǔn)備ができていることを確認(rèn)します。

タイトルをアニメーション化することができます。この例では、$（ 'h1'）を使用して要素を見(jiàn)つけるだけで十分ですが、あなたの場(chǎng)合、適切なセレクターを使用して要素を見(jiàn)つけます。

<h1>></h1>Hello World!>

blast.jsは、jQueryオブジェクトに新しいメソッドを提供します：.blast（）。この最初の例では、1つのオプションDelimiterのみを使用します?！弗悭楗咯`」は、キャラクターごとにタイトルをアニメーション化したいことを示します。

パラメーターを含めない場(chǎng)合、デフォルトの値「単語(yǔ)」（「文字」ではなく使用されます。 >

この方法で、私たちのシンプルなH1要素がアニメーション化され、次のDOMが生成されます。

<h1>></h1>Hello World!>

単語(yǔ)間のスペースが保存されており、スパンにカプセル化されていないことに注意してください。

$(function() {
  // 動(dòng)畫(huà)代碼
});

次に、生成されたスパン要素を取得する必要があります。たとえば、$（'。blast '）を試すこともできますが、簡(jiǎn)単な方法があります。デフォルトでは、.blast（）メソッドは生成された要素を返しますので、これらの要素を取得するためにそれらを変數(shù)に保存するだけです。

生成された要素を取得すると便利ですが、常にではありません。したがって、生成された要素の代わりに親要素（アニメーション化している主な要素）を返すように.blast（）メソッドが必要な場(chǎng)合は、別のオプションを使用できます：returngenerated。デフォルトでは、Trueに設(shè)定されています。

$('h1').blast({
  delimiter: 'character'
});

私たちの例に戻って、収集する要素をアニメーション化しましょう。 jqueryの.each（）メソッドを使用して、各文字を文字でアニメーション化します。

.each（）メソッドは、jQueryオブジェクトに保存されている各要素の関數(shù)を?qū)g行します。以下は、コメントで説明する機(jī)能です。

<h1> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

コード説明：最初に、$（this）を使用して現(xiàn)在の要素（この場(chǎng)合は現(xiàn)在の文字）を取得します。相対位置をゼロに初期化し、最後にこの位置をアニメーション化します。

コードの対応するコメントに示されているように、.delay（）メソッドは、i * 45を使用して定義されたミリ秒の數(shù)の後にアニメーションを開(kāi)始します。 。最初のキャラクターの場(chǎng)合、私は0に等しくなるため、アニメーションはすぐに始まり、次に1に等しくなり、2番目の文字は45ミリ秒後にアニメーション化されます。

var chars = $('h1').blast({
  delimiter: 'character'
});

私たちのアニメーションは準(zhǔn)備ができていて、実行できます！以下のライブ例で表示できます。

パッケージング要素を選択

デフォルトでは、スパン要素が作成されます。これは通常、必要なものです。しかし、時(shí)には、強(qiáng)い、EM、さらにはDivやPなどの他の要素を使用したい場(chǎng)合があります。 Blast.jsでは、これが可能です。

これを行うには、次の例では、各単語(yǔ)がランダムな色でスタイルとされ、EM要素にカプセル化される段落を作成します。

最初に、亂數(shù)を提供する機(jī)能が必要です。 Native JavaScriptで使用できるMath.random（）の変更バージョンを使用します。

この新しい関數(shù)は、MINとMAXの間のランダムな整數(shù)を與え、関數(shù)の引數(shù)として渡されます。

今、段落を色付けする準(zhǔn)備ができました。まず、Delimiter 'Word」を使用して段落をアニメーション化します。新しいオプションを追加しました。タグを追加しました。これにより、blast.jsが要素を生成するために使用したいタグを示すことができます。デフォルトの「スパン」の代わりに「em」に設(shè)定します。

<h1>></h1>Hello World!>

これで、すべての単語(yǔ)がEMタグにカプセル化されています。各タグについて、jQueryの.css（）メソッドとカスタムrand（）関數(shù)を使用して、新しい色を定義します。

$(function() {
  // 動(dòng)畫(huà)代碼
});

次に、親要素の初期狀態(tài)を取得する方法（つまり、これらすべての追加の生成タグをすべて削除する方法）を説明するために、別のコード行を追加します。

これを行うには、false値を.blast（）メソッドに割り當(dāng)てることができます。これにより、この方法を使用した以前の呼び出しによって追加されたすべてのタグが削除されることをBlast.jsに伝えます。

この例を以下のライブバージョンで表示できます。ページに表示されている既存の単語(yǔ)の1つを入力して、効果を確認(rèn)してみてください。

blast.js

で検索します

デフォルトでは、blast.jsは、テキスト內(nèi)のすべての単語(yǔ)、文字、または文の周りに要素を作成します。ただし、単語(yǔ)のグループまたは単語(yǔ)のグループを1つだけ見(jiàn)つけることもできます。JSblast.jsから、単語(yǔ)またはフレーズの各外観を要素にカプセル化することもできます。これを行うには、値が區(qū)切り文字オ??プションではなく、その値が文字列である検索オプションを使用します。

デモンストレーションについては、入力を使用してフォームを作成し、ボタンを送信します。ユーザーは、特定の段落で検索するために入力內(nèi)の単語(yǔ)を示し、その後、Blast.jsは検索された用語(yǔ)をSPAN要素にカプセル化します。

フォームの送信イベントを使用してこれを行います。

$('h1').blast({
  delimiter: 'character'
});

directive e.preventdefault（）;

<h1> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

正しいセレクターを使用して段落を取得してから、False値を初めて適用します。このようにして、ユーザーが以前に他の検索を?qū)g行した場(chǎng)合、これらの検索がクリアされます。

次に、.blast（）メソッドを再度使用します。今回は、検索に必要な用語(yǔ)です。これを行うには、検索オプションを使用して入力値を提供します。他の2つのオプションは必須ではありませんが、それらの存在を示したいと思います。

カスタムクラスオプションを使用すると、生成された要素に獨(dú)自のクラス名を追加できます。前の例で生成された要素を見(jiàn)ると、それらがすべて爆発クラスを持っていることが間違いなくわかります。 CustomClassを使用して、1つ以上のクラスを追加できます。

GenerateIndexidオプションはブール値です。 Trueに設(shè)定すると、生成された各要素にIDが追加されます。動(dòng)作するには、CustomClassオプションが必要です。ここでは、クラス検索を選択します。これにより、最初の生成された要素にはID Search-1、2番目の要素にはSearch-2などがあります。

例を有用にするには、生成された要素を強(qiáng)調(diào)表示するためにCSSにいくつかのルールを追加する必要があります。たとえば、次のルールを適用できます。

この例を以下のライブバージョンで表示できます。ページに表示されている既存の単語(yǔ)の1つを入力して、効果を確認(rèn)してみてください。

var chars = $('h1').blast({
  delimiter: 'character'
});

既存の要素はどうですか？

blast.jsの仕組みを理解した後、これで答えるべき重要な質(zhì)問(wèn)があります。 .blast（）メソッドをコンテナに適用するため、このコンテナにテキストノード以外の要素が含まれている場(chǎng)合はどうなりますか？たとえば、爆発を次の段落に適用した場(chǎng)合はどうなりますか？

<h1>></h1>Hello World!>

blast.jsはDOMツリーを破壊しません。この場(chǎng)合、既存のスパン要素は削除されず、新しいスパン要素（ブラストクラスを使用）が作成されます。上記の段落で$（ 'p'）。blast（）を?qū)g行することにより、次の結(jié)果を生成します。

$(function() {
  // 動(dòng)畫(huà)代碼
});

最後：この既存のスパン要素が実際にblast.jsによって生成されたスパン要素である場(chǎng)合はどうなりますか？答えはあなたがしたいことに依存します。

.blast（）メソッドを段落に適用し、デリミッターオプションを「単語(yǔ)」に設(shè)定するとします。同じ方法を再度適用すると、以前に生成された要素が削除され、新しい要素を作成する前に削除されます。セパレーターの代わりに検索を使用する新しい呼び出しに當(dāng)てはまります。

ただし、用語(yǔ)を検索して.blast（）メソッドを再度呼び出して新しい用語(yǔ)を検索すると、古い検索は削除されません。前のセクションの最後の例では、.blast（false）コールを削除してみてください。この場(chǎng)合、新しい検索が強(qiáng)調(diào)表示されますが、古い検索も強(qiáng)調(diào)表示されます。

とにかく

blast.jsは誰(shuí)にとっても役に立たず、一部の人はそれが完全に不要だと思うかもしれません。ただし、テキストをアニメーション化したい場(chǎng)合は、おそらく見(jiàn)つけられる最良のオプションの1つです。

上記のように、

生成された要素をカスタマイズする他のオプションを見(jiàn)つけることができます。 ARIAプロパティを無(wú)効にすることもできます。

創(chuàng)造的な方法でそれを使用する方法についてのアイデアがある場(chǎng)合、またはこのツールまたは他のツールを使用してテキストをアニメーション化した場(chǎng)合は、ディスカッションでお?dú)葺Xにお知らせください。

Blast.js

を使用してテキストをアニメーション化する私のプロジェクトにblast.jsをインストールする方法は？

プロジェクトにblast.jsをインストールするには、npmまたはbowerを使用できます。 NPMを使用する場(chǎng)合は、Command NPMインストールBlast-Textを?qū)g行してインストールできます。 Bowerを使用する場(chǎng)合、コマンドはBower Install Blast-Textです。インストール後、スクリプトタグを使用してHTMLファイルに含めることができます。 jqueryはjqueryプラグインであるため、jqueryを含めることを忘れないでください。

blast.jsの別のセパレーターは何ですか？

blast.jsは、キャラクター、単語(yǔ)、文、要素の4つの異なるデリミターを提供します。キャラクターセパレーターは、テキストを単一の文字に分割します。セパレーターという言葉はテキストを言葉に分けます。文のセパレーターはテキストを文に分割します。要素セパレーターは、テキストをHTML要素に分割します。

blast.jsを使用してテキストをアニメーション化する方法は？

blast.jsを使用してテキストをアニメーション化するには、まずjqueryを使用してアニメーション化するテキストを選択する必要があります。次に、.blast（）メソッドを使用して、テキストをフラグメントに分割できます。その後、CSSまたはjQueryを使用してこれらのクリップをアニメーション化できます。

jqueryなしでblast.jsを使用できますか？

いいえ、blast.jsはjqueryプラグインであるため、jqueryが機(jī)能する必要があります。 blast.jsを含める前に、プロジェクトにjqueryを含める必要があります。

blast.jsでカスタムデリミターを使用するにはどうすればよいですか？

blast.jsでカスタムデリミッターを使用するには、正規(guī)表現(xiàn)を.blast（）メソッドに渡すことができます。正規(guī)表現(xiàn)は、セパレーターとして使用する文字と一致する必要があります。

なぜ私のblast.jsアニメーションが機(jī)能しないのですか？

blast.jsアニメーションが機(jī)能しない場(chǎng)合、いくつかの理由があるかもしれません。まず、プロジェクトにjqueryとblast.jsを含めるようにしてください。次に、.blast（）メソッドを正しく使用するかどうかを確認(rèn)します。第三に、CSSまたはjQueryアニメーションコードが正しいかどうかを確認(rèn)してください。

blast.jsを使用してHTML要素をアニメーション化できますか？

はい、blast.jsを使用してHTML要素をアニメーション化できます。要素セパレーターを使用してHTMLを個(gè)々の要素に分解し、CSSまたはjQueryを使用してそれらをアニメーション化できます。

blast.jsアニメーションの速度を制御する方法は？

blast.jsアニメーションの速度は、blast.js自體ではなく、CSSまたはjQueryアニメーションコードによって制御されます。アニメーションコードの持続時(shí)間パラメーターを変更して、速度を調(diào)整できます。

他のJavaScriptライブラリでblast.jsを使用できますか？

はい、他のJavaScriptライブラリでblast.jsを使用できます。ただし、blast.jsはjqueryプラグインであるため、プロジェクトにjqueryを含める必要があります。

私のテキストからblast.js効果を削除する方法は？

テキストからblast.js効果を削除するには、.unblast（）メソッドを使用できます。このメソッドは、テキストを元の狀態(tài)に復(fù)元し、すべてのBlast.js効果を削除します。

以上がblast.jsでテキストをアニメーション化しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。