Usually a redesign of a one-page site of mine doesn’t warrant a blog post, but this story is a little bit more interesting, mostly because of the work it built on. I haven’t really told the story of a design before. I’m curious how this will pan out.
I was in my RSS reader last night after an ill-advised after-dinner coffee and saw Naz’s post on Weightshift about the personal page…meme? Can we call it that? I had long since moved to a single-serving homepage w/ some text and an image. In the meantime about.me made it a big deal. (Nevermind that Dallas- based Magnt had a better offering since long ago.)
But let’s face it, Naz’s, and his imitators’, looked better. And most importantly, he posted the source on Github. That meant that seconds later I had my own copy of his source on my computer and started replacing his images and text with my own.
It used a script called backstretch to position and size the image, also on Github, which I also forked and modified for my uses. Since I had already decided to use a wedding picture, I wanted to try and at least create two layers so the field grass could superimpose the text box. The original backstretch script could only accomodate one image which it threw far into the back of the document model. That was easily fixed in just a couple lines of code.
That got me thinking about the awesome Github 404 page. Maybe I could parallax the grass! Well I tried applying the parallax plugin to the elements in question and no dice. I tried a new page that didn’t use backstretch and applying the parallax plugin there–still no dice. Last night I decided to stick to just the two layers–if someone had a window sized just right, they would notice the grass popping up over the bottom of the box.
Of course this morning I couldn’t let it be! I read most of the parallax code and while it was pretty much what I expected, its need to accomodate for all manner of circumstances made it overly complex to just copy and paste to fit my needs. I ended up just hand-coding some simple code that moves the grass in the direction you move your mouse, after doing a single left- right sway once on page load just for good measure.
I’m far too pleased with the end result. Now I am considering trying to get the foreground grass to actually bend as it moves…in the meantime if you haven’t you can check it out.