こちらのスクリプトをベースにさせていただきました。
春風そよよ〜!桜の花びらがヒラヒラ舞い落ちる JavaScript だよー!
完成度の高いスクリプトをありがとうございます...!
という感じだったのですが、レスポンシブデザインに入れると
横風エフェクトで画面外に流れた桜が勝手に幅や高さを拡張してレスポンシブが乱れるという問題が発生。
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では負荷のかかる処理はNGで、自動的に制限されるイメージ。
手持ちのiPhone5Sで桜吹雪コンポーネントを検証すると、動作がカクカクしたので、
対応を行った。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント