HTML | The New Olio

HTML5 Canvas Particles Revisisted — With Physics!

Posted by Tim in Code

While I wrote a few years ago about HTML5 canvas particle effects, I’ve gotten a lot of questions about the effect I have on my new personal site. No, not the crazy swirling thing on the left—we’ll go over that another time—but the fun little bouncy ball thing. Go ahead and check it out. I’ll wait. Pretty cool, right? It’s written entirely without any framework or library like jQuery or D3.js or Three.js. While they’re pretty handy for compatibility, data visualization, and comprehensive 3D graphics rendering (respectively), I didn’t have…read more

CSS3 Trickery: A Lesson in Gradients and Masks

I’m currently working on a project where one of the designs I’m to implement involves making one of these suckers: However, that’s not all. Based on where the user is amidst these four steps, it will actually end up looking something like this: Normally, I’d achieve this with CSS sprites and be rather sad about it all since whatever I’d be doing would be either a) not semantically correct, or b) terribly convoluted. Luckily, this project is specified to only having to run on Chrome, which I finally get to…read more