As you might have noticed, I’ve redesigned/relaunched my personal site yet again. I’m pretty excited by the change this time, because unlike previous versions of the site, I’ve completely started from scratch. I plan on reimporting a few relevant pieces of content from the old site, but most of the old stuff was frankly cruft, and not worth pulling over.

Parallax Scrolling Map Background using Modest Maps

parallax map

I was excited to see the DrupalCamp Ohio site launch recently with a very “road-trip” look and feel to the site. As someone who’s really into mapping and travel, I think it’s a great way to show a sense of exploration with your site. I especially like the nice touch of adding parallax scrolling to the background (, which gives it a great sense of depth.

But as I was submitting my session, I noticed that the implementation of the theme felt a little heavy and unpolished. The main culprit was the half-meg map image in the background. The background image easily took up half of the download bandwidth for the home page, which seems excessive. Also, it seemed fairly inflexible, since the image was of a fixed height, which might cause some issues later on down the road for longer pages like session listings.

In response, I decided to see if I could do a parallax scrolling map background using actual web mapping tools instead of a fixed image. This would provide some extra flexibility in display options, since one could theoretically display maps from any location in the background instead of just a single image, and it would potentially be lighter on bandwidth depending on how tall a page ends up being.

Read More »