【js】紙吹雪のように写真が降ってくるjavaScriptのコード書きました。

パラパラと桜吹雪とか紙吹雪みたいなのがひらひらと舞ってくるjsを作りました。

この記事の目次

完成形

See the Pen [js][/js]猫画像が色々パラパラ落ちてくるvar02 by nkmrkisk (@rekid) on CodePen.

指定した画像が、紙吹雪のように舞うjsのサンプルコードを作りました。

 title="option"]
// ---- Option設定 ---- //
var opt = [];
opt.pct = 30; // 要素の最大発生個数
opt.DPspeed = 25; // 要素の下への移動速度（ミリ秒）
opt.CLspeed = 1000; // 要素の作成速度（ミリ秒）
// ---- Option設定 ---- //
// ---- img設定 ---- //
var bgi = [
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg',
  'http://example.com/img/image.jpg'
];
// ---- img設定 ---- //

opt.pct = 30; // 要素の最大発生個数

要素の最大発生個数の指定が出来るようにしてあります。指定数に達したら最も古い要素から勝手に消えて行きます。

opt.DPspeed = 25; // 要素の下への移動速度（ミリ秒）

ミリ秒単位で、下への移動速度の指定ができるようにしています。とはいってもこのミリ秒はsetInteravlの実行スパンの設定になりますので、小さい方が大きく動くようなイメージになります。

opt.CLspeed = 1000; // 要素の作成速度（ミリ秒）

要素がどれくらいのスピードで生成されるかの指定ができるようになっています。

ここからは、簡単にですが制作の経緯を公開します。自分の備忘録などがメインです

css3でくるくると回るエフェクト

css3のAnimationを使って、くるくると回転するKeyframeを設定しました。

DEMO

css3のanimationでハマった事

css3ではベンダープレフィックスの付与についてなどハマる箇所が多いですが、今回僕がハマったのは、『rotate3d()』の指定です。
やりたかった事としては、『rotate3d(1, 1, 1, 0deg)』から『rotate3d(1, 1, 1, 360deg)』まで一定の速度で走らせたかっただけなのですが、
safariとfirefoxで動かない。。。微動だにしないんですわ。。

解決の経緯

一応、いずれ自分がまた行き詰ったときのためにも、どういった経緯で解決に至ったのかを記しておきます。

animationが動作しているか確認（opacity設置）

どこまでが動作していて、どこから上手く機能していないのかを順をおって確認する必要がありました。そこでとりあえずopacityが『0->1』に向かう記述を追記。
これでfirefoxとsafariどちらも動作することを確認。

僕の場合は動作しました。つまりanimationの設定に問題があるのではなく、Keyframe内のcssの指定に問題がある（rotate3d）という状態です。

animationが動作しなかった原因

結論としてfirefoxとsafariでは、開始と終点の数値を追うのではなく、最短ルートに修正されるみたいです。
どういうことかというと、『rotate3d(1,1,1,0deg) -> rotate3d(1,1,1,360deg)』という指定（クルッとまわって一回転）するような指定をしていたのですが、
firefoxとsafariでは、「ん？これ、今の位置と終点の位置が一緒じゃん。動かなくていいじゃんラッキー☆」みたいな状態になっているようです。

ダメだったコード

@keyframes flipInY {
  from {
    transform:rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform:rotate3d(1,1,1,360deg);
  }
}

対処：

ちゃんと、中間地点にも指定を入れてあげたら、動いてくれました。。

@keyframes flipInY {
  from {
    transform:rotate3d(1, 1, 1, 0deg);
  }
  25%{
    transform:rotate3d(1,1,1,90deg);
  }
  50%{
    transform:rotate3d(1,1,1,180deg);
  }
  75%{
    transform:rotate3d(1,1,1,270deg);
  }
  to {
    transform:rotate3d(1,1,1,360deg);
  }
}

パラパラと下に落ちていく要素の自動生成

See the Pen [js][/js]勝手に出てきて下に行く箱（指定数制限可） by nkmrkisk (@rekid) on CodePen.

パラパラと黒いつぶつぶが自動生成され、それが少しずつ下へ移動し、指定数に達すると消えるように設定しました。あまり躓いた記憶がないので、そのままです。

まとめ

ここまで作った結果、「これを変えたい、あれを変えたい、」と修正＆改善したい点が山のようにでてきました。もっと良い物を作って公開したいと思います。
次は本格的な桜吹雪作ろう。あとせっかくだしキャンバスで書こう。svgでも書こう。

完成形