Focus Theme

Focus Theme

Created by

Published on

Updated on

Tags

I’ll come out and say it: I am way too excited about revealing interface elements right now and I need to tone it down. Apple has been doing this effect for a while on iOS and with more recently in OS X so I wanted to try my hand at it.

Animation

Animation showing a column reveal.

There is a fair bit of jQuery that makes these effects happen and they look smooth as silk for computer users. Tablet browsers aren’t playing as nicely—and don’t even bother with it on a phone. I learned that this is likely to do with how fixed-position elements are handled on those devices.

Animation

Animation showing a row reveal.

One jQuery effect that I am very proud of scripting (visible in the featured image at the top) involves scaling the images dynamically to fill in the horizontal space in a pleasant arrangement.

Some of the best take aways I got from this theme came as I was reading more into the CSS3 standard. I didn’t get to apply much here but I have some ideas to try in the future.