2019-08-31に更新

桜吹雪コンポーネント、作りました

CSSとJavascriptで桜吹雪を作る

こちらのスクリプトをベースにさせていただきました。
春風そよよ〜!桜の花びらがヒラヒラ舞い落ちる JavaScript だよー!

完成度の高いスクリプトをありがとうございます...!
という感じだったのですが、レスポンシブデザインに入れると
横風エフェクトで画面外に流れた桜が勝手に幅や高さを拡張してレスポンシブが乱れるという問題が発生。

ついでにReactコンポーネントに

document.getElementByIdはnullになってしまうので、findByDOMNodeを使う。

g[i] = ReactDOM.findDOMNode(this.refs["hanabira" + i]);

要素をJSXで書ける。

let m = (
        <div
          className={
            "hana t" +
            (Math.floor(Math.random() * 6) + 1) +
            " y" +
            (Math.floor(Math.random() * 6) + 1)
          }
          ref={"hanabira" + i}
          id={"hanabira" + i}
          style={{
            zIndex: z + i,
            top: t[i],
            left: l[i]
          }}
        >
          <div></div>
        </div>
      );

レスポンシブ用に修正

勝手に幅を拡張しないように、デフォルトの幅を記憶しておく。

let w = window;
let defaultWidth = w.innerWidth - 10;
if (l[i] > defaultWidth) {
          l[i] = Math.random() * defaultWidth;
        }

デフォルトの幅を超えそうになったら座標をリセットする。

iOS対応

iOSでは負荷のかかる処理はNGで、自動的に制限されるイメージ。
手持ちのiPhone5Sで桜吹雪コンポーネントを検証すると、動作がカクカクしたので、

  • 花びらの枚数を減らす
  • setIntervalの待ち時間を増やす

対応を行った。

ソース

github

ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント