Firstly, the piece in question is included in the page via an iframe or inline frame, which allows you to incorporate the contents of another page as if they were an object. Before I discovered css, I used a 'server side include', creating my webpages as .shtml files, with repeated blocks of code replaced by references to an external file containing the code in question. Similarly to CSS, this allows you to keep your repeated elements separate and edit them once rather than many times. These techniques both have advantages and disadvantages which I'll have to look into when creating my final site, but for now iframes might come in handy for incorporating or referencing demonstration pages.
In any case, taking a closer look, we find that Román's bird piece can be found here.
This allows us to take a look at the code. The css is contained within the .html, rather than being in a separate file, so you can see it all at once. The concept is beautifully simple, and the execution elegant but hard to tease out. A single .jpg contains a grid of photographs, each corresponding to a certain set of lighting conditions.
A div called 'paperbird' which is the size a single bird image is set up so that if its contents exceed it size, the correct response (eg. rather than ignoring the excess) is to allow the user to scroll around this base div, as if it were a small window into a large box.
What happens then might be a bit clearer with some formatting:
<div id="paperbird">...
<div id="y1">
<div class="x1">
<div></div>
</div>
<div class="x2">
<div></div>
</div>
This is a nested series of divs, laid out in much the same way as elements within a table. Paperbird acts as the table itself, and each of the y divs acts as the tr or table row. Within each of these is an x div, which acts as a td or table cell, and within these are a fourth layer of divs, where the image frame is held.
Paperbird is small, but within this the rows are 30,000px wide, the cells are each 5,000px square. By floating to the left, they stack up on top of each other to form a horizontal row - overcoming the natural tendency of divs to sit below the previous one.
(When you break the 'float' function of the cell divs, all the divs are stacked in one long column. If you then scroll vertically, you access all of the images in each of the six rows in sequence, thus indicating that by passing through each cell you access various parts of the image.)
As paperbird contains a series of large but empty and transparent divs, the user is able to scroll around the entire table without noticing. The only change is that when they move from one div to another, the id of the new cell dictates that the background image should change by referencing a new set of co-ordinates within it. As the background image is fixed in relation to the webpage as a whole, the effect is that after a certain amount of scrolling, the image jumps.
I've sketched out a schematic of how the whole thing works. This is mostly for my own reference, but it might clarify things if you're almost following up to this point!
Click to embiggen. Not an accurate representation - the background image is included to show how each section of the table references a particular position within the image.
Finally, the framing .png image occupies each of the innermost divs. Its transparent window allows us to see the correct section of the bird below, while hiding the excess. Interestingly, disabling its fixed status does not kill the effect, while disconnecting the image does. This might be a feature designed to cope with the different implementations of css found in different browsers.
All in all, a very interesting way of doing things, I'm glad I took the couple of hours to take it apart.
No comments:
Post a Comment