"Using Canvas"
Bootstrap 3.3.0 Snippet by mtustian

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '40pt Calibri'; context.fillStyle = 'blue'; context.fillText('Hello World!', 150, 100); </script> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function drawRectangle(myRectangle, context) { context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = '#8ED6FF'; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = 'black'; context.stroke(); context.shadowColor = '#999'; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; } function animate(myRectangle, canvas, context, startTime) { // update var time = (new Date()).getTime() - startTime; // pixels / second^2 var gravity = 200; myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2); if(myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) { myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2; } lastTime = time; // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw drawRectangle(myRectangle, context); // request new frame requestAnimFrame(function() { animate(myRectangle, canvas, context, startTime); }); } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myRectangle = { x: 239, y: 0, width: 100, height: 50, borderWidth: 5 }; drawRectangle(myRectangle, context); // wait one second before dropping rectangle setTimeout(function() { var startTime = (new Date()).getTime(); animate(myRectangle, canvas, context, startTime); }, 2000); </script> </div> </div>

Related: See More


Questions / Comments: