落下と跳ね返り

HTML

<div id="stage">
	<div id="item"></div>
</div>

CSS

/* 範囲 */
#stage {
	position:relative;
	border-bottom:2px solid #666;
	width:300px;
	height:300px;
}

/* 移動するアイテム */
#item {
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	border-radius:50%;
	width:20px;
	height:20px;
	background-color:#d00;
}

JavaScript

var gravity = 9.8,  // 重力加速度
	v0      = 0,    // 初速度
    damping = 0.8,  // 反発係数（減衰）
    time    = 0.15; // 瞬間経過時間（秒）

// 要素を取得
var stageElem = document.getElementById('stage'),
    itemElem  = document.getElementById('item');

// 着地地点（落下距離）を取得
var baseY = stageElem.clientHeight - itemElem.clientHeight;

// 初期化
var v = 0, y = 0;

/**
 * 位置を算出
 */
var calcPosition = function() {
	// 瞬間速度を算出
	v += v0 + (gravity * time);

	// 次の落下位置を算出
	y += v * time;

	// 着地地点を超えたら跳ねて上げるための処理
	if (y > baseY) {
		// 位置を着地地点に設定
		y = baseY;

		// 反発係数（減衰）をマイナスで速度に当てて上方向に移動するようにする
		v *= -damping;
	}
};

/**
 * アイテム要素の位置を更新
 */
var updatePosition = function() {
	itemElem.style.top = y + 'px';
};

// 初期位置を設定
updatePosition();

// 落下をアニメーション
var sid = setInterval(function() {
	calcPosition();
	updatePosition();

	// 着地地点に到達したらアニメーションを停止
	if (y === baseY && Math.abs(v) <= gravity / 2) {
		clearInterval(sid);
	}
});