クレジット：
今日は独立記念日で、米国にお住まいの方なら、それが何を意味するかご存知でしょう。ビールを飲み、バーベキューにステーキを投げ込み、爆破する時です。あなたのウェブサイトやブログでちょっとした爆発的な良さを表現して、物事の精神に浸ってみてはいかがでしょうか?
この記事では、以下を使用して簡単な花火エフェクトを作成します。jQueryこれは Web ページ上のあらゆる要素に適用できます。これを使用して、写真、背景、または数ピクセルを拡大したい場所に花火を追加します。結果はかなり基本的なものですが、それでも非常に優れており、JavaScript アニメーションの優れた入門書となります。
ページの設定
まず、主にデモンストレーションを目的として、少しのマークアップが必要です。
これは非常に簡単です。基本的な HTML をセットアップし、Google の CDN から jQuery を取得しているだけです。また、fireworks.css と Fireworks.js も呼び出します。これらは後ほど作成します。 jQuery は私が選んだ JavaScript フレームワークなので、花火の作成に使用します。爆発のアニメーション化には多大な労力がかかります。
マークアップが完了したら、CSS に進むことができます。繰り返しますが、それは非常に単純です。定義する必要があるのは、いくつかの要素、つまり花火を保持するコンテナ (この場合は「#photo」) と、画像の代わりに使用するベース パーティクルとして使用できる小さな div だけです。 , なので、簡単に色を変更することができます。
コンテナから始めましょう。夜の湖の素敵な写真を撮りました証券取引所それを背景として使用する予定です。
上記の CSS のほとんどは、ページ上の写真の高さ、幅、位置を定義するためのものですが、注意すべき点がいくつかあります。花火が写真から飛び出さないようにオーバーフローを「非表示」に設定し、写真内でパーティクル要素を絶対的に配置するため、position:relative を追加しました。ご覧のとおり、写真の HTML にはイメージ タグがありません。代わりに、div の背景として使用されます。そうすれば、写真 div の内容を操作するときに心配する必要がなくなります。
次に、ベース パーティクルの CSS を定義する必要があります。必要なのは、高さと幅を指定し、絶対位置を使用するようにブラウザに指示することだけです。私は 3 ピクセル x 3 ピクセルのパーティクルを使用していますが、それより大きいまたは小さい写真を使用している場合は、パーティクル サイズを調整することをお勧めします。
これで、次のようなものができるはずです。ページ本文にも CSS を追加しましたが、花火にはまったく関係ありません。
クレジット：
アニメーションの作成
これらの準備が整ったので、プロジェクトの核心である JavaScript に進む準備が整いました。
ただし、爆発関数を書き始める前に、パーティクルを複製する簡単な方法が必要です。 jQuery の組み込み clone メソッドをいつでも使用できますが、大量のコピーを作成することになるため、もう少し効率的な方法を使用しましょう。
私は車輪の再発明を好まないので、次の場所で見つけた便利な小さなプラグインを使用します。jQuery 分これは、.duplicate() 関数を使用して jQuery を拡張します。
プラグインがどのように機能するかについては、上記のリンク先の記事で詳しく説明されているため、詳しくは説明しません。現時点では、たとえば .duplicate(50) を使用してパーティクル要素でそれを呼び出すことができることだけが重要です。これにより、自由に 50 個のコピーが得られます。
さて、それでは本題に取り掛かり、爆発関数を書いてみましょう。ただし、アニメーションの構築と要素の作成を開始する前に、関数が呼び出されるたびに設定されるいくつかの変数を定義する必要があります。
これを段階的に説明し、これらの各変数が何のためにあるのかを見てみましょう。
空- これは、花火を含む要素の jQuery オブジェクトであり、explosion('photo') のように、実行時に要素 ID を渡すことによって構築されます。
色- 花火に使用するいくつかの明るい色のシンプルな配列。単色の花火と多色の花火を作成します。
エミッター- 単純な div オブジェクトを作成し、それにパーティクル クラスを与えます。これが爆発の拠点または中心になります。
多色- 後で花火を多色にするかどうかを決定するために使用される 0 ～ 10 の乱数。
エミッタ オブジェクトを作成したので、それにいくつかの CSS プロパティを追加する必要があります。 DOM に追加する前にこれを行うのが最善なので、そうしましょう。
エミッタのスタイルを設定したら、それをコンテナに追加できます。ついでに、これらの複製も作成しましょう。
おっと！ちょっとまって。数学は一体どうなったのでしょうか？心配しないで。乱数*を作成しているだけです。これは、花火が打ち上げられると、写真上にランダムに配置されることを意味します。
この場合、写真の上部 100 ピクセルにのみ花火を表示したいため、幅は 3 から写真の幅 (400) までの乱数で、高さは 3 から 100 までの乱数です。空）。なぜ 3 なのか?特に理由はありませんが、爆発が常に写真の端の少し内側の中心に来るようにしたかったということ以外にあります。
最後に、配列からランダムな色を取得して背景色を取得します。
* 範囲内で乱数を作成するには、最大値から最小値より 1 を引いた値の差を取り、それに Random() からの値 (0 から 1 までの値) を掛けます。次に、それに最大値を掛けます。 。最後に、これらすべてを Floor() 関数でラップし、結果を整数に変換します。
素晴らしい！これで、上でランダムに決定した X、Y 座標のキャンバス上に 51 個のパーティクルが配置されました。ここで私たちがしなければならないのは、少しアニメーションを与え、場合によっては新しいペイントを施すことだけです。
これを行うには、それらをループする必要があることを意味します。そのため、古いマシンではリソースを少し消費する可能性があるため、50 個程度を超えるパーティクルを作成することはお勧めしません。
jQuery の .each() 関数を使用すると、要素の配列をステップ実行して、要素ごとに内部のコードを実行できます。
ここでは、x オフセットと y オフセットを設定していることがわかります。これらは、パーティクルがどの方向にどの程度移動するかを決定します。上記と同じ式を使用すると、これらのオフセットは -10 ～ 10 の範囲の乱数になります (それぞれ上/下と左/右)。
上で多色の変数に対して乱数を生成したときのことを覚えていますか?では、これを使用して、現在のパーティクルの色を変更して多色の爆発を作成する必要があるかどうかを確認してみましょう。半分以下の確率で複数色の花火が欲しいので、カットオフポイントとして 5 を使用することにしました。好みに合わせて変更することもできます。
この時点では、これは一目瞭然です。 multicolor の値が 5 より大きい場合は、colors 配列から別のランダムな色を取得してパーティクルの背景を変更します。
それでは、これらの粒子を動かしてみます。上記で決定した x オフセットと y オフセットに基づいて、アニメーション シーケンスを設定します。各パーティクル アニメーションの全長を取得するには、これらのオフセットを 10 倍します。これにより、中心点から -100x、-100y と 100x、100y の間の適切な広がりが得られます。つまり、爆発の最大直径は200ピクセル。写真のサイズに応じて、これを大きくしたり小さくしたりすることができます (ヒント: 大きくする場合は、より良い効果を得るために、より大きな粒子を使用します)。
ご覧のとおり、アニメーション速度も 2.5 秒 (2500 ミリ秒) に設定しています。これにより、中心点からパーティクルが滑らかで均一に拡張されます。
ここでしなければならないのは、アニメーション シーケンスの最後に到達したパーティクルをどうするかを決めることだけです。さて、花火は打ち上げが終わった後はどうするのでしょうか？それらは少し下がって消えていくので、パーティクルにそのようにさせます。
上記のアニメーションは、拡張アニメーションが完了した後に実行され、パーティクルを 20 ピクセル落とし、同時に不透明度 10% にフェードします。 「遅い」持続時間のプリセットを使用しているため、パーティクルは大気中でわずかに「ぶら下がっている」ように見えます。
それでおしまい！手動でトリガーするか、ページの読み込み時に自動的に呼び出すことで、explode() 関数を呼び出して写真上で花火を打ち上げることができるようになりました。この例では、setInterval を介して 3 秒ごとに呼び出しています。
残念ながら、ここでアニメーションを実行することはできませんが、以下のビデオデモをチェックしてください。
チュートリアルを楽しんでいただければ幸いです。花火の様子をライブでご覧いただけますここ、 またはソースに直接行きます。
Mashable のその他の開発および設計リソース: