fontBomb

I think a good way to start would be to have a look I the source code, fork it and experiment on it: https://github.com/plehoux/fontBomb/tree/master/src/coffee If you want to google your way out of it start with something like "CSS 2d transform". There's a lot of differents technologies going on in the background, but it still fairly simple to understand. 1. I parse the the html to wrap each character in a <particle> tag. + Some hacks, to keep withespace. 2. I iterate trough all <particle> element and add velocity depending of bomb position. 3. Velocity is calculated with basic trigonometry. I then move the particules with css 2d transform. ps. I putted a lot of effort in optimisation, no Math.sqrt, no objects in the loop (velocityX vs velocity.x), etc. But at the end the bottleneck is really the browser rendering.

This is cool... When I looked at your JS, I thought to myself "that is a reasonable amount of code for that kind of functionality...even a little less than I would've thought"...considering there's no dependencies to browser-taming libraries: https://github.com/plehoux/fontBomb/blob/master/js/particle.... And then I saw the CS: https://github.com/plehoux/fontBomb/blob/master/src/coffee/p... Nice!

http://fontbomb.ilex.ca/js/main.js https://github.com/plehoux/fontBomb/tree/master/src/coffee

Here it is: https://github.com/plehoux/fontBomb/tree/master/src/coffee

I'm the author, it works best in Safari and IE 9. Use the bookmarklet to destroy any website. Source is here: https://github.com/plehoux/fontBomb/tree/master/src/coffee