【js】紙吹雪のように写真が降ってくるjavaScriptのコード書きました。【js】紙吹雪のように写真が降ってくるjavaScriptのコード書きました。【js】紙吹雪のように写真が降ってくるjavaScriptのコード書きました。コメントはまだありませんパラパラと桜吹雪とか紙吹雪みたいなのがひらひらと舞ってくるjsを作りました。CodePen.指定した画像が、紙吹雪のように舞うjsのサンプルコードを作りました。要素の最大発生個数の指定が出来るようにしてあります。指定数に達したら最も古い要素から勝手に消えて行きます。要素の下への移動速度(ミリ秒)ミリ秒単位で、下への移動速度の指定ができるようにしています。いってもこのミリ秒はsetInteravlの実行スパンの設定になりますので、小さい方が大きく動くようなイメージになります。要素の作成速度(ミリ秒)要素がどれくらいのスピードで生成されるかの指定ができるようになっています。ここからは、簡単にですが制作の経緯を公開します。自分の備忘録などがメインですcss3でくるくると回るエフェクトcss3のAnimationを使って、くるくると回転するKeyframeを設定しました。DEMOcss3のanimationでハマった事css3ではベンダープレフィックスの付与についてなどハマる箇所が多いですが、今回僕がハマったのは、『rotate3d()』の指定です。360deg)』まで一定の速度で走らせたかっただけなのですが、safariとfirefoxで動かない。微動だにしないんですわ。一応、いずれ自分がまた行き詰ったときのためにも、どういった経緯で解決に至ったのかを記しておきます。animationが動作しているか確認(opacity設置)どこまでが動作していて、どこから上手く機能していないのかを順をおって確認する必要がありました。そこでとりあえずopacityが『0->1』に向かう記述を追記。これでfirefoxとsafariどちらも動作することを確認。僕の場合は動作しました。animationの設定に問題があるのではなく、Keyframe内のcssの指定に問題がある(rotate3d)という状態です。結論としてfirefoxとsafariでは、開始と終点の数値を追うのではなく、最短ルートに修正されるみたいです。rotate3d(1,1,1,360deg)』という指定(クルッとまわって一回転)するような指定をしていたのですが、firefoxとsafariでは、「ん?これ、今の位置と終点の位置が一緒じゃん。動かなくていいじゃんラッキー☆」みたいな状態になっているようです。}}対処:ちゃんと、中間地点にも指定を入れてあげたら、動いてくれました。CodePen.パラパラと黒いつぶつぶが自動生成され、それが少しずつ下へ移動し、指定数に達すると消えるように設定しました。躓いた記憶がないので、そのままです。まとめここまで作った結果、「これを変えたい、あれを変えたい、」と修正&改善したい点が山のようにでてきました。良い物を作って公開したいと思います。次は本格的な桜吹雪作ろう。あとせっかくだしキャンバスで書こう。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。