blast.jsでテキストをアニメーション化します-jsチュートリアル-php.cn

Animating Text with Blast.js

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

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

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

キーポイント

blast.jsとは何ですか？

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

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

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

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

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

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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

$(function() {
  // 动画代码
});

ログイン後にコピー

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

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

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

ログイン後にコピー

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

.each（）メソッドは、jQueryオブジェクトに保存されている各要素の関数を実行します。以下は、コメントで説明する機能です。

<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）を使用して現在の要素（この場合は現在の文字）を取得します。相対位置をゼロに初期化し、最後にこの位置をアニメーション化します。

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

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

ログイン後にコピー

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

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

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

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

最初に、乱数を提供する機能が必要です。 Native JavaScriptで使用できるMath.random（）の変更バージョンを使用します。

この新しい関数は、MINとMAXの間のランダムな整数を与え、関数の引数として渡されます。

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

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

ログイン後にコピー

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

$(function() {
  // 动画代码
});

ログイン後にコピー

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

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

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

blast.js

で検索します

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

デモンストレーションについては、入力を使用してフォームを作成し、ボタンを送信します。ユーザーは、特定の段落で検索するために入力内の単語を示し、その後、Blast.jsは検索された用語を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値を初めて適用します。このようにして、ユーザーが以前に他の検索を実行した場合、これらの検索がクリアされます。

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

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

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

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

$(function() {
  // 动画代码
});

ログイン後にコピー

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

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

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

とにかく

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

上記のように、

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

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

Blast.js

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

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

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

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

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

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

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

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

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

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

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

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