jquery - jQuery を使用して http://ellislab.com/codeigniter のような火花効果を実現する方法

Question

http://ellislab.com/codeigniterのように、オレンジ色の「ヒーロー」リードの背景に火花が飛んでいるような効果を再現したいと考えています。

その背後にあるjQueryを調べたところ、複雑に見えます。そこにライブラリや、方向性を示すことができる「テンプレート/チュートリアル」に関するものはありますか?

ありがとう

Answer 1

JavaScript の良いところは、それがクライアント側であることです。これは非常に単純な JavaScript であり、css を使用して火花のスタイルを設定するだけです。スパークを実行するコードの主な束は次のとおりです。

// Let some sparks fly in a somewhat randomly timed fashion
          this.startSpark = function(){
            if (me.sparkInterval != null) return;
            me.sparkInterval = setInterval(function(){
              var opac = Math.max(.15, Math.random() - .4),
                  size = Math.floor(Math.random() * 120 + 30),
                  spark = $('<div/>').addClass('spark')
                    .css({
                      'width': size,
                      'height': size,
                      'opacity': opac, 
                      '-moz-opacity': opac
                    });

              $wrapper.append(
                spark
                .css(
                  {
                    "bottom": "-100px",
                    "left": (Math.random() * 100) + "%"
                  }
                )
                .animate(
                  {
                    "bottom": "800px",
                  },
                  Math.floor(Math.random()*3000+1000),
                  "linear",
                  function(){
                    $(this).remove(); // don't need the spark if we're in the dark
                  }
                )
              )
            }, 500)
          }

基本的に、彼らは 'spark' div を作成し、不透明度、幅と高さ、および位置をランダムに設定し、それを DOM に追加してからランダムにアニメーション化し、アニメーションが完了したら DOM から削除します。inspect 要素または firebug を開く方法がわからない場合は、ソース ファイル全体を次に示します: http://ellislab.com/asset/js/ci.js

残念ながら、「ランダムな火花をアニメートする」jQueryプラグインが見つかりませんでした。これを冒険として数えてください。ひざまずいて、JavaScript を学び、何かを壊して、楽しんでください! 少しの作業と学習で、これを機能させることができると確信しています。