CSS Parallax, pt I

Tagged with: css, development

It took me quite a bit of brain-bending to figure out a potential way of doing this. The concept I want to test is using a placement of the images based on a relative measurement, with the size of the images as an absolute measurement. By then changing the size of the relative unit, the images should displace themselves, right?

In terms of CSS this would mean I would have to do placement based on EM's, since I can alter the size of 1 EM by setting the font-size to a different pixelf-format. Also by starting out at (for instance) 100px/em, it is relatively easy to line up the images correctly...

Test Case 1

For my first attempt I'll be using two semi-transparent boxes. That way their placement in relation to each other will be obvious and I won't have to (potentially) waste time on slicing up a cool looking picture :)

At this point in time I must say I was a little disappointed with my own stupidity. The twist I was looking for is still there in my mind, waiting to be put into code... This wasn't it. Clearly if you change the value of em's for one level, and then modify the position to match with the first level, no-matter how far you manipulate the parent body, the child-values will scale with it...

However, I think I'm on the right path, just using the wrong end-solution. As I mentioned, the 'twist' is waiting to be unlocked in code!! Essentially the difference in relative size is important for my trick to work. But I forgot to work into it the absolute measurement...