お疲れ様です。小林です。
落下させたいときってありますよね。
自分自身とか。
【こちらもおすすめ】
☞ 「Canvasで落下するボールのアニメーションを表現する方法」
☞ 「CSS3・JS・jQueryなど、フロントエンドのみでアニメーションを実装する方法」
JavaScriptで落下するボールを表現する
サンプル
まずは以下のデモをご覧になってください。
何色でした？（※アニメーションが見れなかった方はリロードしてみてください。）
金や銀色だった方、今年はすごいことになるかもしれませんよ。
白だった方。あ・・・（察し
解説
作り方を解説します。
HTML
<body>
<span id="ball"></span>
</body>うん。spanですね。
CSS
body {
margin:0;
padding:0;
background-color: #333;
}
#ball {
display: block;
width: 140px;
height: 140px;
position: absolute;
border: solid 8px #000;
border-radius: 50%;
background-color: #ffffff;
}うん。ボールっぽいですね。
仕組みとしましては、position=absoluteにして、topを変更していこうっていう寸法です。
Javascript
var ball = document.getElementById("ball")
,bh = ball.offsetHeight
,bw = ball.offsetWidth
,left = ( window.innerWidth / 2 ) - ( bw / 2 )
,top = -ball.offsetHeight
,ground = ( window.innerHeight / 2 ) - ( bh / 2 );
ball.style.left = left + "px";
ball.style.top = top + "px";準備ですね。ウィンドウサイズとボールのサイズを取得して、スタート地点の位置を算出しています。
var y = top
,b = ground
,v = 0
,R = 0.48;
function gravity() {
y+= ++v;
if( y >= b ) {
y = b;
v*= -R;
if ( !~~v ) {
clearInterval(g)
}
}
document.getElementById("ball").style.top = y + "px";
}
var g = setInterval(gravity, 10);メイン関数です。
setInterval()で10ミリ秒毎に実行します。
こうすることによって、アニメーションのタイムラインを擬似的に作りだすわけですね。
まずは、ボールの位置を変更します。始点からの距離を増やしていくイメージです。
y+= ++v;跳ね返りを考えなければこれだけでオッケーです。どんどん進んでいきます。
document.getElementById("ball").style.top = y + "px";ちょっと飛んでgravity関数の最後の方ですが、ボールの位置を更新します。
if( y >= b ) {
y = b;
v*= -R;
if ( !~~v ) {
clearInterval(g)
}
}跳ね返る部分ですね。
目標位置まで到達したら、反発係数っぽいものをマイナスで乗算してやります。
最後に動きがなくなったらclearInterval()しています。
まとめ
いかがでしたか？
簡易なものですが、使いどころがありそうですよね。
最後に、ひとつ。
落ちるのは簡単だ、だが、登るのはどうだろうか？
そうです。たとえ今が辛くとも、どうか自分を信じて、たゆまぬ努力を続けてください。
いつかきっと報われるときがくるはずです。
【フロントエンドでアニメーションを実装】
※ CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法
※ SVGとjQueryで絵を描いているようなアニメーションを実装する方法
※ 刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法
※ CSS3のanimationで春うららかな桜を降らせてみた（雨にも雪にもなる！）
※ CSS3だけで作れる格好良いローディングアニメーション５つ！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
