<\/p>\n<\/p>\n
If you haven’t seen the mysteriously cool Silverback app<\/a> teaser page you should check it out. The Gorilla was designed by Jon Hicks<\/a> (yep! the same site with the cool body-border technique<\/a>). Make sure you resize your browser around when you visit the site to see the cool “parallax<\/a>” effect of the hanging vines. The site itself was designed by Paul Annett. Paul wrote an article on Think Vitamin on how he created that parallax effect<\/a>.<\/p>\n I thought I would take the idea an explain it in a bit more detail, which a slightly different application, and offer up a download for those interested.<\/p>\n You can think of motion parallax as what you see when you look out of a moving train. Bushes right alongside the train tracks will zip past your view, while cattle grazing in the field will appear to move more slowly across your view and the mountains in the background will hardly move at all.<\/strong> Parallax has particular relevance to astronomy. Not only because sci-fi movies use the effect all the time to create cool space effects, but because this effect is how we measure how far stars are away from our own solar system.<\/p>\n In honor of this amazing effect and it’s relevance to science, I created Starry Night<\/a>. Starry night is a full-page background effect with three layers. Distant stars will only move a little bit as you resize the browser window, while closer stars will move faster. The effect is created with three page elements, all of which occupy the entire browser window. The body (“background”), a div (“midground”), and another div (“foreground”).<\/p>\n The body element will fill the entire screen by default, but we’ll have to style the other two divs with absolute positioning to do the same.<\/p>\n Both the midground and the foreground PNG files are alpha-transparent, so they will lay on top of each other nicely. The important part here is the % values you see in the background attribute. This controls the horizontal and vertical positioning, but in the context of this example, you can read that as “how fast you want it to move”. Also notice you can go beyond 100%, this means it will move at a faster rate than the rate of resizing the browser window.<\/p>\n It is worth mentioning at this time that this effect just ain’t gonna happen in IE 6 or below. Between the bugs with PNG and the bugs with absolute positioning, it’s just not worth it.<\/em> In my example, I use a conditional stylesheet<\/a> to display a warning message.<\/p>\n That’ll be up to you, notice in my example page<\/a> the small bit of content in the upper right. You could do something similar. Remember that any area you build to put content into will need to be absolutely positioned<\/strong> and have a higher z-index value<\/strong>. Otherwise, the absolutely positioned foreground and midground will cover up your content area and you won’t be able to select or click anything (if you can see it at all).<\/p>\nWhat is Parallax?<\/h3>\n
Multiple Backgrounds with Parallax<\/h3>\n
<body>\r\n\t<div id=\"midground\"><\/div>\r\n\t<div id=\"foreground\"><\/div>\r\n<\/body><\/code><\/pre>\nbody { \r\n\tbackground: url(images\/background.png) repeat 5% 5%;\r\n}\r\n#midground {\r\n\tbackground: url(images\/midground.png) repeat 20% 20%;\r\n\tposition: absolute;\r\n\ttop: 0; left: 0; right: 0; bottom: 0;\r\n\tz-index: 997;\r\n}\r\n#foreground {\r\n\tbackground: url(images\/foreground.png) repeat 90% 110%;\r\n\tposition: absolute;\r\n\ttop: 0; left: 0; right: 0; bottom: 0;\r\n\tz-index: 998;\r\n}<\/code><\/pre>\nWhere does my content go?<\/h3>\n