Parallax V1
I've been wanting to spiff up the blog a bit lately. In many ways this is actually an excuse to do a few things I've been meaning to do anyway but it gives me a place to really try them out in a slightly nontrivial way.One of the things I wanted to add to the blog is a bit of subtle visual interest. I wanted to add a notion of pull quotes (easy) and adding a bit of motion to static images.Something that's been popular on the web of late is parallax scrolling. Now I'm not talking about the page transforming as you scroll, but rather giving a bit of activity to the page as it scrolls.I had a few criteria:
- It can't be offensive visually
- It has to be able to be used without diving into code while editing a post
- Captions on these new-fangled images had to be cool
- It needs to degrade gracefully to smaller screen sizes
I solved this with a bit of JavaScript and JQuery.At this point I'm at the proof-of-concept stage. Take a look at the example I have posted to get a feel for the effect. Feel free to copy it if you want.What I have left to do is to integrate this into WordPress and make it degrade nicely. Right now it doesn't, but I haven't tried yet either. A bit of width-specific CSS is likely all it'll take to make this work well. But I'll prove that out shortly.(Also, I've started to tweak other parts of the site as well...)