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

個人開発4年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

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

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

ボードとは?

関連記事

コメント