Skip to content

Instantly share code, notes, and snippets.

@sgruhier
Created June 8, 2010 09:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sgruhier/429820 to your computer and use it in GitHub Desktop.
Save sgruhier/429820 to your computer and use it in GitHub Desktop.
Demo page of CSS3 transform/transition with some JS
#ballon {
-webkit-transition: all .2s ease-in-out;
}
<img src="balloon.png" id="balloon"/>
(function () {
function $(id) { return document.getElementById(id); }
var x, y, bx = 0, by = 0, angle, balloon = $('balloon');
document.addEventListener('mousemove', function(event) {
x = event.pageX;
y = event.pageY;
});
function updatePos() {
var dx = x - bx - 30,
dy = y - by,
nangle = Math.atan(dx/dy),
nbx = x - 35,
nby = y - 165;
balloon.style.webkitTransform = "translateY(" + Math.min(y, Math.abs(dx/2)) + "px) translateX(" + nbx + "px) rotate(" + nangle + "rad)";
bx = nbx;
by = nby;
angle = nangle;
}
setInterval(updatePos, 150);
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment