Jump to Main Content Jump to Footer Jump to Header
Ian Moffitt

Hover over the blocks!

I wanted a feature on my site that demonstrated coding creativity and also was a bit of fun. I had this idea while back of having something in the background of my site that would slowly darken as people moused over it. It would darken for everyone who visited, and you would get these "maps" on the site of how people moused around.

When I got around to coding this, I approached it more from a sketching perspective. Sometimes you just want to doodle a bit. Who cares if anyone sees it.

Each square is a span, and the colors are saved in inline styles. This also makes it easy to "save" the image, as I only need to query spans that have a style attribute. I tried rewriting this at one point to use requestAnimationFrame to possibly be more performant, but ultimately it didn't matter or improve it, as I'm only actually adjusting the color when the mouse is over an element. Interval timeouts did the job.

I have some ideas how to make this feature a bit more fun, but for now it's a neat feature and it was really fun to code.

I changed from staggered to a simple grid based on feedback from a friend. I actually like the simple grid better.