Thanks a lot! Playing with the code explained it well.
I think geoffschmidt's otherwise great explanation explained the score calculation a wrong-way around: checked score radio buttons start with zero height and when they get unchecked they grow to their 93px height.
I learned a few new things that were necessary to understand this:
1) States of radio inputs can be connected by name attributes and connected inputs can have an inverse state to each other.
2) Transition effects can be connected to checked/unchecked states (at least with "all" property)
3) Using a wrapper div with overflow:hidden you can create "a window" to a larger content that moves "behind" the window. I've seen this in some scroller effects, but as my CSS skills are quite bad, I couldn't yet write one without googling for some help.
Comments
How does the score counter work? The rest of the stuff seems quite straightforward, but this one I couldn't figure out with quick examination.
See geoffschmidt comment and also there: http://jsfiddle.net/72bbx/
Thanks a lot! Playing with the code explained it well.
I think geoffschmidt's otherwise great explanation explained the score calculation a wrong-way around: checked score radio buttons start with zero height and when they get unchecked they grow to their 93px height.
I learned a few new things that were necessary to understand this:
1) States of radio inputs can be connected by name attributes and connected inputs can have an inverse state to each other.
2) Transition effects can be connected to checked/unchecked states (at least with "all" property)
3) Using a wrapper div with overflow:hidden you can create "a window" to a larger content that moves "behind" the window. I've seen this in some scroller effects, but as my CSS skills are quite bad, I couldn't yet write one without googling for some help.