Parallax without Javascript

Tagged with: experiment, css

Parallax is probably one of the oldest (fake) 3D perspectives in use on computers, I wanted to take it on in a slightly novell way, with a minimum of javascript and as much power out of CSS as I can. However, I also wanted it to react on the mouse, not so much scrolling around...

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 litte 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, nomatter 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...

Test Case 2

So, keeping the same offset in em's while correcting the difference in pixels should do as I intended :) This also should include the width and height in absolute measurements...

This attempt made me both happy and sad at the same time!! Why? Well, the answer is quite simple. My goal was to mimic some of the more subdued, but ultimately cool error-pages at github (among others). Here moving the mouse sideways and/or up and down will alter the view-point parallax style. However, the solution I just dreamed up will either modify both vertical and horizontal, or only 1 of the 2. I cannot, currently, foresee an option that can do both individually :(

This unfortunately means I will have to script it all the way, which isn't such a bad thing, just not quite what I had hoped...

Test Case 3

Too stubborn for my own good ;)

Not quite ready to throw in the towel, here's for an attempt using parent-size modification, floating, relative position, percentile margin and anythin else I can deam up!!!

Obviously, when I said I could not foresee a solution in which I could modify either the horizontal, or the vertical, I must have been lying :). While having been able to come up with a completely different modifier, all that remains now, is to combine both solutions into one test case.

Test Case 4

In this final test-case I hope to combine the parent-size solution with the parent-font-size solution to be able to manipulate the horizontal and vertical offset individually, thus having a solution that could potentially do parallax view-point manipulation with incredibally simple javascript math!!!

Scratch that, the font-size concept is a tougher concept than the percentile margin-offset (that is, I have to double-check how that works vertically, I can recall some issues with that, we'll see...)

That's looking like a tremendously promising result!! To be able to work with more dramatic shifts in parallax I used a 1000px 'canvas' and based my parallax layers based on those dimensions. All I needed to take into account is that changing the size of the canvas will also shift the position of the center, which we need to counter-act by changing the centering of the canvas in relation to its' parent viewport. At first I was using the left/top properties but came to realise it'll be more comfortable by far to alter the margin-top/margin-left since they are simply the height/width in halve...

Test Case 5

A colleague all but challenged me to create a mouse-over parallax shift without any Javascript!! At first that sounded insane, but he suggested using anchors and :hover. This still sounded insane untill, while working on the previous test-case I remembered out that CSS3 has a sibling selector! So, z-index to the rescue, some fancy postioning, complex selector rules and I should be ready to go :)