CSSアニメーションを作ろうと思いました。
#コード
この質問はコードに関することではないので、適当に書きます。
html
1<body> 2 <div class="circle"></div> 3</body>
css
1.circle { 2 position: absolute; 3 bottom: 100%; 4 width: 4px; 5 height: 4px; 6 border-radius: 50%; 7 background: white; 8} 9 10.circle { 11 animation: move 10.0s ease 0s forwards; 12} 13 14@keyframes move { 15 from { 16 bottom: 100%; 17 } 18 to { 19 bottom: 0%; 20 } 21}
これは丸いdivが、10秒間かけて下に移動していくアニメーションです。
animationのところを見てもらえばわかる通り、このアニメーションは0秒からスタートします。
問題
これをPCで読み込んだ場合は問題は起こりません。
ただ、スマホで読み込んだ時に、画面が表示される前に、アニメーションが始まってしまいます。
多分読み込まれる2秒前くらいからスタートします。
これを、表示されたと同時にスタートさせるにはどうしたらよいでしょうか。
自分で考えた例
javascript
1var circle = $(".circle"); //circleの読み込み 2var ua = navigator.userAgent; //デバイス取得 3$(function () { 4 if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) { 5 //スマホ用コード 6 setTimeout(assignFirstAnimation, 500); //500ミリ秒遅らせる 7 } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { 8 // タブレット用コード 9 setTimeout(assignFirstAnimation, 500); //500ミリ秒遅らせる 10 } else { 11 // PC用コード 12 assignFirstAnimation(); //遅らせない 13 } 14}); 15 16//circleにアニメーションを割り振る 17function assignFirstAnimation() { 18 circle.css("animation", "move 10.0s ease 0s forwards") 19}
このコードは、デバイスを判別して、スマホかタブレットだった場合、500ミリ秒後に、circleにanimationの部分を割り振るものです。(もちろんcssのanimationプロパティの部分は消します。)
これで一応いい感じになりますが、これだと、この後にアニメーションを描こうとした時に、全部ずれ込むためjsで全部割り振っていかなければいけなくなります。
それは大変なので、スマホの読み込み完了を検知するよい方法がないかなと思った次第です。
できれば、jsのonloadイベント的なもので、携帯の読み込み後に発火するものがあると一番いいのですが。。。
回答4件
あなたの回答
tips
プレビュー