投稿日:2020年2月29日

HTML、CSS、JavaScriptで桜の花びらが舞うアニメーションを作ってみました。
ググると、この類のサイトが複数ヒットしますが、私の方が優れていると思います。。。たぶん。だといいなぁ。。。
DOM操作でCSSを書き換えています。
 
ランダムな数値を取得し、花びらの大きさ、色、ボカシ、回転、速度を変化させています。
HTML、CSS、JavaScriptをまとめたHTMLファイルを準備しておきました。
ご自由にご使用ください。

別ウインドウで開く

 
※requestAnimationFrameを使ってますが、PCに不可がかかるかも知れません。
低スペックのPCだと動作がぎこちなくなると思います。
パソコンが破損するとは思いませんが、何か問題が生じても責任は負い兼ねますのでご了承ください。




 

Pocket