雷のようなアニメーションをウェブで作りたい。ＣＳＳ、ＨＴＭＬ5でできますか？

写真のようなものをネットで作りたいのです。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/05/23 17:23

こんにちは

回答が無い様なので…

＞写真のようなものをネットで作りたいのです。
「ネット」とはブラウザ環境で画面に表示するといった意味合いで良いのでしょうか？
また、「写真のようなもの」と「アニメーション」しかキーワードがありませんが、アニメーションと言ってもいろいろなものが考えられるので、それによっても可能/不可能が変わってくるかもしれません。


ご存知のように、CSSでもアニメーションは可能ですので、比較的規則的なアニメーションを想定しているのならHTMLとCSSのみで実現できることでしょう。
放電現象のシミュレートのようなことを動的に行うようなイメージだとすると、プログラムを利用した方が実現しやすいのではと思います。

放電軌跡のシミュレーション的なものの例
http://www.somethinghitme.com/projects/canvaslig …
https://blender.stackexchange.com/questions/1875 …

あるいは、もう少し大雑把なエフェクトとしてなら…
https://gamedevelopment.tutsplus.com/tutorials/h …


軌跡をシミュレートしてかつリアルな光の感じを出すのが良いのかもしれませんが、両方やるのはちと面倒そうなので、だいぶ手抜きですが、雷の画像を順次重ねて表示する方法を考えてみました。
まずは、重ねられるように雷の画像を加工。
かなり手抜きで10分程で透明化にしてみたものなので、あまりきれいではないかも・・・（汗）
実は、この回答は画像投稿目的の回答です。
（次の回答で、この画像を利用したサンプルを示してみます）

この回答へのお礼

リンクすごい！
画像もすごいですね！

ありがとうございます。

お礼日時：2017/05/23 17:27