When I was a lad, I remember being wowed by an effect in Sonic the Hedgehog known as parallax scrolling. Moving my little spiky friend to the right caused the foreground to move past the camera to the left faster than the background, creating a faux-3D view of Green Hill Zone.
We can create a similar effect on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions. In addition to this, blurring some of those images will emulate focus and depth-of-field. The effect can only be seen as the browser window is resized, but I really like the subtlety of this — not everybody will notice it, but it’s like a hidden Easter egg for those who do.
I used this effect with great success on the holding page for Clearleft’s latest project, Silverback.
Upfront about IE6
Frankly, this just ain’t gonna happen in IE6. Although we could use javascript to force the browser to display transparent PNGs, its not suitable for this effect. We could use alpha-transparent GIFs instead, but the lack of anti-aliasing will end up looking terrible. My recommendation is to think about your target audience and the browsers they will likely be using, show this effect to those with Safari, Firefox, Opera, or IE7 and use conditional comments to override it in IE6. In my example below, IE6 users just see a flat background image and are none the wiser.
Choosing a suitable scene
It’s a web page that we’re creating, so as always we should be mindful of file sizes. Because it uses large transparent PNGs this effect isn’t frugal on the bandwidth, and although we’re not going to achieve this in under 100k, we should obviously try to avoid making the total image filesize 500k or more! To avoid large file sizes, we should restrict the height of each layer, or choose a scene which works well with horizontally tiled layers. It’s always a compromise because too much tiling becomes obvious and reduces the impact of the effect.
As you can see from Silverback, hanging vines lend themselves nicely to being split into multiple layers because they are positioned in the foreground, middle distance, and background. You might choose a plane flying through some clouds, or a city-scape with houses and skyscrapers. To use a clich�, the only limit is your imagination … and the fact that you should only use 3 or 4 layers. Any more and the overall file size would be too much of a strain on those with delicate Intertubes.
Your page content will become one layer within the scene, and since even the transparent areas of images can’t be clicked “through”, its best to make your content the foreground element unless your page contains no links or forms. We can fake elements nearer to the “camera” if they don’t overlap the content. I’ll come to that later.
Creating your layers
Looking at the Silverback site, there are three layers of vines (1, 2, 3) plus the main content layer at the front (4). Although all of the vines are technically “behind” the main content layer, the foreground vines look closer to the camera because they’re larger, very blurred, and don’t stretch far enough down the screen to ever dip behind Steve (the gorilla) and shatter that illusion.
The main content of the site will naturally be the focal point of the camera, and in the Silverback example the middle distance layer of vines - which appears to be slightly behind the main content - is left without a blur to give the impression that they’re roughly the same distance from the camera as Steve.
Lastly, the back layer of vines are blurred (though not as much as those in the foreground) and slightly lighter, as if fading away into the misty distance. These vines are flattened onto the green gradient which forms the background of the page - since we don’t need to see anything further into the distance, we can use an opaque JPG instead of a transparent PNG. This saves on file size, and as a result allows us to use an image with larger dimensions for the background if we like.
Creating the parallax
There really is nothing new about the CSS we use to create this effect - it’s just cleverly applied. I will give code examples not because it’s difficult but precisely to show how simple it is.
We wrap the content in a div which is centered on the screen using this CSS:
div#content{
margin:0 auto;
width:640px;
}
For the purposes of positioning the other layers we need to think in percentages, so it makes sense to do the same thing here. Centering the content effectively positions it 50% of the way across the screen. As you make the browser window smaller, it moves horizontally at half the speed of the window-edge that you’re pulling around with your mouse.
The background layer of vines is tiled horizontally across the body of the website, and positioned 20% of the way across the screen. Although this doesn’t change how it initially looks, it does change how it behaves - 20% of the width is relative to the screen size, so as you make the window smaller the 20% gets proportionally smaller, giving the illusion that the vines are moving slowly to the left (at a fifth of the speed of your mouse).
body{
background:#d3ff99 url(../images/bg-rear.jpg) 20% 0 repeat-x;
}
The middle distance layer of vines is a tiled transparent PNG background on a div wrapped around the content. It needs to appear to be between the content and the background, so we need to choose a percentage between 50% (the content) and 20% (the background). For this example, I’ve chosen 40% to position them closer to the content than the background. When you resize the browser you’ll notice that they move slower than the main content, but not by much.
div#midground{
background: transparent url(../images/bg-mid.png) 40% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
}
The enlarged and blurred foreground layer of vines follows the same pattern, but for added fun we position the background beyond the top right of the browser window, at 150% (100% would be fixed to the top right), to make it move faster than the browser resize! This gives the illusion that they’re really close to the camera.
div#foreground{
background: transparent url(../images/bg-front.png) 150% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
}
Nothing fancy for IE6
Finally, we use conditional comments to make sure IE6 only sees a flat image with no faux-3D effect. Remember to override the foreground style even if you’re overriding it with nothing, by specifying background:none.
body{
background:#d3ff99 url(../images/gradient.gif) 0 0 repeat-x;
}
#midground{
background:transparent url(../images/flatvines.jpg) top center repeat-x;
}
#foreground{
background:none;
}
And that’s it! Feel free to use the source code of the Silverback holding page as an aid to understanding my method. There are a couple of variations to this effect, which I’ll mention now.
Genuine foreground
We can move the empty foreground div to the start of the HTML and add the following lines to the div#foreground CSS to position it actually in front of the content. Doing this will allow its background image to dip over the content but will also mean that the content can’t be clicked. Only use this if your content contains no links or form elements.
position:absolute;
top:0;
left:0;
z-index:1;
Genuine foreground demo (for the purposes of this demo the content is nearer to the top of the page so that it dips behind the shorter foreground vines).
The Rissington Effect
With hat tipped gratefully in the direction of The Rissington Podcast, I should mention the joys of playing around with negative percentages. Notice that the Spitfire at the bottom of their website cleverly moves off the screen to the left as you widen the browser window. It’s positioned at -5%, and the wider the browser the larger 5% of it is, so the further it moves to the left. In our example, if you set the background layers to have negative percentages you can make the landscape appear to rotate around the content as you resize the browser. The more extreme the percentages, the faster the rotational effect.
My happy ending
With all my designs I like to try to include something remarkable, pushing the boundaries of what can be achieved using just HTML and CSS. This technique, combined with others, opens the door to all sorts of possibilities. I can imagine things hiding behind solid foregrounds and only sliding into view as the browser size exceeds a certain dimensions, or elements fading into view as the browser is resized. Show me what you can do!
Awesome effect Paul - after seeing Silverback page was inspired to do something similar on my own work in progress over at http://dumago.net/.
Hat duly tipped in your general direction sir.
I think it’s a great technique. Thanks so much for sharing it.
By the way, looking forward to seeing what Silverback is all about. ;)
Although I think the effect is neat the implementation is poor IMHO. Just take your three images and combine them in your image editor. Then set the pre-combined single image as the background to the page. You gain:
* Simple CSS - one background-image statement
* Simple Markup - no need for all those divs. Just attach your background to your body tag.
* Cross-Browser - You can support IE6 without resorting to filter hacks (which this implementation didn’t even bother to do).
* Reduced HTTP traffic - I haven’t measured but I imagine the combined image would be smaller than the separate images. Even if it is not the fact that it is only one HTTP request makes the user experience much better.
What is peoples obsession with over-complicating stuff just for the sake of doing so. I can only imagine how much time was wasted coming up with this overly complicated implementation, not to mention the time taken to write the article.
I just hope if people want to use the animation technique they don’t follow this implementation and waste their time also.
@Eric - Talk about missing the point. Why do you have a logo and text and all those pictures on your Pixelware site? Why not just have plain text (don’t have to mess with those bothersome paragraph tags) on a white background (no need to set complicated hex values) that says “Pixelware makes websites, email me”? That’d be a whole lot simpler, right?
Eric, you must have misunderstood something. You cannot combine the images to one and still gain the effect. How about you just try out the demo to see it (resize the silverback page)?
I too am so sick of seeing complicated CSS and XHTML, things that don’t work in crappy browsers (though they fail cleanly), and stuff that requires connection speeds greater than dial-up. I sincerely hope that one day web designers will stop using images and whatnot, and especially new and advanced techniques. What a waste of time.
Please stop pushing the envelope, guys, okay? Thanks.
@Darryl: Haha, I had to give that a second read. Nice one ;)
In all seriousness, though, I was on Windows when I saw the Silverback site. I turned on the “Show window contents while dragging” thing–which I usually have off–and resized Firefox back and forth for a few minutes. This technique is seriously too cool. Awesome job, Clearleft.
Please keep pushing the envelope, guys, okay? Thanks.
Oh, and please, for the love of god, tell us exactly what the hell Silverback is.
I must say I don’t get this either. Why not just combine all three images into one transparent .png? What purpose is served by splitting them into layered divs?
Did you guys actually read the article? Notice the bit about parallax? Resize your browser slowly and watch the images move.
OK, just realized that the point of the effect is only realized if you resize your browser window. Now I understand all the trouble that was gone to - but I still don’t understand the utility. When was the last time you went to a site and resized your browser window to see if there was any cool affect associated with it? Who would even realize that this was part of the page?
Now, if the author had animated the scrolling of the background divs at different speeds to achieve the affect on sight, this might be more valuable.
Great article. How did you set those images in 3D (to show the layers)?
I soooo look forward to the day that we can use CSS 3 Multiple background images. Then, we wouldn’t need those superfluous divs, and we can get really crazy.
Thanks for sharing your process.
Really great design. For all that still don’t get it, minimize your browser and then drag the resize and watch the images while doing so. ( I didn’t get it at first either )
And for those looking for what Silverback is, here is the text from the RSS Feed page:
Clearleft are pleased to announce Silverback - a revolutionary new desktop application for web designers, available in the first half of 2008. Stay tuned for more news.
Thanks for the great article.
Excellent, I love that effect! Great article and well written, thanks.
[…] Paul Annett von Clearleft erklärt für die neue Webanwendung Silverback den Einsatz von Parallax Scrolling (zu deutsch Bewegungsparallaxe), das mehrere Hintergrundbilder für einen tollen 3D-Effekt verwendet: Think Vitamin How to recreate Silverback’s Parallax Tags: Markup, Tutorial « Flickr-Bilderarchiv der Library of Congress […]
I am like the other posters above and do not understand why you would do this? I visited the Silverback website a few days ago and never noticed this because seriously who resizes the browser window that often?
Granted I did really like the website I just didn’t know about this “easter egg”-like feature earlier.
“For all that still don’t get it, minimize your browser and then drag the resize and watch the images while doing so.”
It actually works better if you open a sidebar in your browser and drag that back and forth; the changes occur in real time rather than dragging the actual browser window where you have to wait until you release the mouse to see the images change.
[…] Paul Annett of Clearleft has a tutorial post on Vitamin today stepping the reader through a recreation of the parallax CSS design trick from Silverbackapp.com. Parallax scrolling for a website involves overlaying png images to give the page a 3D look. […]
I can understand the comments about this nifty trick only working when you resize the browser window. To chime in with the “thanks for pushing the envelope”, I thought of a way to use this trick in combination with scriptaculous’s morph effect to work on just a div instead of the whole window. You can see my example here: http://offtheline.net/examples/parallax/
I reused the same images from Paul’s design just for example - Paul, if there’s a problem with that, please let me know. I’ll swap them out with something else (sorry, programmer here, not much of a designer). Thanks for the great article!
I am not against pushing the envelope at all. I am just against over-complicating something just for the sake of doing so when a simple image would achieve the same effect.
I admit after reading the other comments I missed the resize angle. So yea, you guys are right. Using a simple image wouldn’t give you the EXACT same effect since the resize trick won’t work anymore.
So let me get this straight. You are:
* increasing the complexity of your code
* increasing the maintenance cost of your code
* increasing the download time for your users
* lowering your browser compatibility
all for the sake of what? A easter-egg resize trick that 99% of people wouldn’t even notice in the first place. Even after writing an article about the easter egg 50% of people missed it (including myself). Maybe it is just my practical side but what is the point?
@Eric: To elevate the medium from a utility to art. That is why.
You’re right in that this is a technically simple effect to implement, but thanks for writing it up for the benefit of those who might not have noticed it.
No thanks to those who can’t read and/or appreciate visual trickery for its own sake.
Guys, if you don’t want to increase the complexity, maintenance, cost, download time blah blah blah blah by doing this, there’s a very simple solution: don’t. You’d think from reading some of these comments that people were being rounded up and forced at gunpoint to implement this on their own websites. Please, just stop commenting and go write up your cost-benefit analyses of art somewhere else.
@Eric: Thanks for giving me good reason to ignore you next time I need to hire a website contractor. What a killjoy.
Seriously, what purpose does complaining about this serve? It’s a teaser page! These guys are experimenting with it. Experimentation leads to new ideas. New ideas are good!
Thanks for sharing the technique guys. I for one would love to see more depth effects on websites.
Loved it when I first saw it courtesy of Dan’s first post. It’s still brilliant. While arguments for removing ‘bloat’ (etc) might suggest this is extraneous so remove it, I say art is in the eye of the beholder (and eye like this) and if we dulled all aspects of life down the the raw essentials, who would have a swoosh on their shoe, a sticker on their bicycle, an expensive comb to keep their hair looking just so, or a smile-bringing set of transparent PNGs cleverly used with a brill’ gorilla design from Jon Hicks?
Its good to see some individuality in web design. I think as a web designer we should have a little bit of room for some flair!
I visited the Silverback site a week back or so and didn’t realise this technique was in place…but what a great idea. This could be really interesting used on a site such as this: http://www.cistudios.com.au/folios/digital/
ie, where a user is encouraged to scroll horizontally, you could really get that Sonic the Hedgehog effect going…could be fun used in the right place I guess.
Nice walkthrough for a great, but subtle effect. I bet we’ll see a lot more of this in the near future.
Just one more thing: Please check your references to the image in the paragraph beneath the header “Creating your layers”. They are a bit off ;-)
Interesting technique, I wonder if you could use some Javascript to subtly move the backgrounds?
It’s not something I’d use on a production site purely because it’s a big overhead for such a small effect. But I’m a big fan of movement and depth so I think it’s worth it for other sites.
I’d be curious to see what someone could come up with for vertical scrolling. Almost all websites scroll and an effect like this would be hard to miss then. Might silence some of the nay sayers. Proof of concept anyone?
Haaa - all these haters!! They must be IE users!!!
Of course, what it really needs is some JavaScript to take over the user’s window and resize it wildly all over the screen - bet you’d notice the effect then…
Paul, way cool! Unlike the naysayer, I will try to incorporate this technique into a project as soon as I can.
I think it’s an awesome effect.
Fair enough this technique uses a few extra divs, but I think the end result is worth the extra bytes : )
[…] Following on from the enthusiastic reception to Paul’s Silverback landing page - and the homage he’s paid to Sonic the Hedgehog’s ‘parallax scrolling’ effect, I noticed the beautiful a.viary.com this morning. The illustration doesn’t use CSS wizardry to achieve the effect - but it is beautifully rendered and sets out the off - web applications for creative people - in an exemplary way/ […]
@Eric: it might be a mistake, but I’m assuming you’re not a Troll, and really don’t understand why anyone went to the trouble.
By the same logic you could ask why did Gaudi to the trouble to build Case Batilló the way he did? A simple wooden structure would have served the same purpose of shelter, and certainly would have been much cheaper, quicker and efficient to build. So there I’d have to say you’ve got no argument.
And as for the “easter-egg resize trick that 99% of people wouldn’t even notice” argument, I’m afraid the facts speak loudly against you there too. There are currently 796 results on Google for “silverback clearleft“, i.e. 795 results for an app that no one knows what it even is. This shows a pretty strong reaction to what *is* there, namely a pretty cool PNG trick, which obviously many people *have* noticed. And considering the goal of the current page is purely to create hype, I’d say this PNG trick is not only successful, but also essential to achieving the goal.
Stubbornly clinging to hard and fast “laws” regarding download times, browser compatibility, code complexity, etc. - regardless of goals and context - may offer comfort by making the world look more clean and orderly than it really is, but it kills creativity and drastically reduces the possibilities for achieving your goals. And other than that, it’s just not much fun.
[…] […]
For all those (possibly just one) who said that this trick is pointless or just design for design’s sake. Imagine all the extra publicity generated by this trick. We are all now waiting with baited breath to find out more about this app, and as its aimed at web designers, we can (almost) all appreciate its ingenuity and not care whether it works in IE6. How many of us actually use IE6 as their main browser anyway.
@allNaysayers - Remember that this is a site for “a revolutionary new desktop application for web designers” ie the target audience will not be using IE6, will not be on dialup and will be more likely to poke around looking for easter eggs.
If the effect was on the local council web page then your arguments may hold more sway.
@Paul Annett - Lovely site and like many inspired me to play around with similar effects, sadly (I suspect like many) mine are nowhere near as nice on the eye!
[…] Vitamin Features » How to recreate Silverback’s Parallax Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site. […]
Nice effect. You can do something similar in Flash like this http://a.viary.com . Perhaps the css here can be altered to to move the backgrounds based on the mouse position?
We created a paralax-ish effect using javascript on http://www.umaghetzeggen.nl which is somewhat more interactive than this.
Oh man, can we *please* stop whining please? Heaven forbid we do anything cool… why don’t we just trash the Zen Garden for being a den of pointless bandwidth consuming idiocy? Yes, this effect isn’t feasible (in a variety of ways) for most websites, but it could be a nice little effect on the right site.
Besides, despite the pointlessness of this *exact* implementation, it shows several nifty tricks if you stop complaining and read. I, for one, never thought about how placing a positioning marker of over 100% would make it move faster than the actual refresh of the browser.
For that matter, I didn’t realize that giving it a negative percentage would cause it to move in the opposing direction (which can be a handy trick all on its own, even without any other “extraneous” code).
Plus, as has already been shown in the comments section (thanks Jason L), this effect can be combined with *other* effects to make it much more obvious than currently shown. This effect can also easily be translated to a vertical effect, rather than horizontal (which is immediately what I thought of, and SuperExtraUltra mentioned above), which would be much more visually apparent.
Long story short: stop complaining and look at more than the sum of the parts. You learn more that way.
[…] Vitamin Features » How to recreate Silverback’s Parallax Nifty CSS tricks (tags: css) […]
I love this css effect and for that record any little touches that take a site from being “one of the norm” to something unique.
My ONLY query would be… Why not just write the javascript so that those using Microshaft Internet Ignorer can see it too? I’m guessing there is an issue with the re-draw rate or something as Paul mentions it not being suitable?
Anyway top idea Paul and I for one would be interested to see if this “trick” gets utilised elsewhere.
As one of the “whiners”, I just want to clarify: I think the thought that went into imagining and recreating this effect, and the willingness of the author to explicate the process, are really top-notch, and very welcome. The design and development community benefits when these kinds of articles come out.
My original point was more to question the implementation. The effect, as implemented, adds next to no value to the Silverback page at all. I hope that when people start building on it (as several already have), what makes this idea cool is more front-and-center to the implementation.
Kudos to the author for starting the ball rolling.
Thanks to everybody who has commented so far - its fantastic that this article has provoked such thought and debate, and its great that so many people see the value in the kind of lateral thinking that this effect encourages. It’s nice to see the effect in use on Cole’s site, and I can’t wait to see other sites using this effect or other imaginative interpretations of it in fun and creative ways.
To the naysayers, I would argue that the effect as implemented does add value for the user, Willis. User experience design is as much about making a site fun to use as it is about making a site functional, and one way to do this is to add ‘discoverable’ elements to give people a warm and fuzzy feeling when they figure them out. As long as it the site still works if people don’t notice them, this won’t cause a problem.
The effect also added amazing value for us (the website publisher). Because it was aimed at web designers who were intrigued by a new effect, word spread like wildfire and resulted in 25,000+ visitors just in the first day of the site going live. That’s a significant number of potential customers in such a short space of time.
You should be thinking in these terms too, and creating websites which have a unique appeal to your target audience. Obviously this effect isn’t right for every audience, as Alan and several others pointed out.
Askill - thanks for noticing that, it’s now corrected :-)
[…] Pues días después podemos encontrar un artículo en Vitamin para saber como se creo dicho efecto, desde el código CSS hasta el orden de las imágenes PNG, “How to recreate Silverback’s Parallax“. […]
[…] Silverback. Not entirely sure what this is, but resize the window to see some coded brilliance. How to recreate the effect. […]
[…] How to recreate Silverback’s ParallaxParallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site. […]
[…] How to recreate Silverback’s ParallaxParallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site. […]
[…] 9)How to recreate Silverback’s Parallax- Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site. […]
[…] I just read Paul Annett’s How to recreate Silverback’s parallax on vitamin. […]
[…] 9)How to recreate Silverback’s Parallax- Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site. […]
Well, I love the effect ant the technique… It is very useful to make background combines because with these DIV controlling the different backgrounds I can use a random sentence and have dozens of combines… excellent if you are designing a kids web or want to make a city at the morning, afternoon and night and you don’t want to use flash .
Thanks Paul.
————————————————————————–
Bueno, me encanta el efecto y la tecnica…. es muy útil para lograr combinaciones de fondos porque con estos DIV controlando los diferentes fondos puedo usar una rutina aleatoria y tener docenas de combinaciones, excelente si estas diseñando una web para niños o quieres hacer una ciudad en la mañana, tarde y noche y no quieres usar flash.
Gracias Paul.
To all of the people who didn’t notice the parallax and said “why not just combine the three images into one”.
Well, parallax aside, there is still a compelling reason to have three different BG images. They can be pretty small, and tiled, and the overall effect (assuming their widths differ) is a non-uniform image. To do the same with one image you’d need a MUCH bigger image.
This is a great technique using only CSS! Although, I didn’t notice it until I read to resize the browser. However, this technique can be employed with other AJAX type resize elements for some cool effects that can be tied on without writing extra javascript script.
Thumbs up…!!!
As Paul said, setting the background position to 20% places the image 20% of the way across the screen (or parent element). What’s interesting and wasn’t mentioned in the article is that the point that is set at this position is not the edge of the image but a point 20% from the edge of the image.
Thus an image positioned at 70% will have a point 70% from the edge (left or top for horizontal and vertical positioning respectively) of the image positioned 70% across the parent element.
While this has little affect on how this technique works I thought I’d mention it as it may be useful to anyone unfamiliar with the nitty gritty of CSS.
Also it’s vital that when using negative percentages or percentages greater than 100% to get this to work that you use an image that tiles and set it to repeat and not just use a really huge image because no matter how big your image gets a user will see the edge.
This a a really neat effect and I think Jason L’s example of combining it with something like Scriptaculous’ morph effect is especially cool.
Parralax in your face at http://www.ff0000.com
You’re missing the point by pointing out similar effects on Flash based sites, Colin. Pretty much anything is possible in Flash, that’s no surprise. The fact that this can be achieved without Flash or even javascript is what makes it remarkable, and potentially useful. Many web designers choose not to use Flash so that everybody can access their website.
[…] Actualización (1/03/08): Aún no sabemos qué es, pero en Vitamin ya han explicado cómo se hace el efecto del fondo. […]
[…] [view original post] [source: Delicious] March 1, 2008 | In links […]
[…] [view original post] [source: Delicious] March 1, 2008 | In links […]
[…] How to recreate Silverback’s Parallax Everybody must have seen the Silverback CSS moving background. Here’s how you do it. […]
[…] How to recreate Silverback’s Parallax Tags: CSS, HTML […]
[…] As it turns out, the scrolling effect of Silverback (resize your window) was inspired by none other than Sonic the Hedgehog. […]
There’s a similar effect in Flash here:
http://www.effectscode.com/ImageEffects/DepthField/XML/
[…] Over the past few weeks, there’s been growing buzz about Silverback which is some sort of application for web designers due out later this year. Amazingly, the viral buzz hasn’t stemmed from the program’s amazing features or ability to streamline the design process, instead people are getting all jacked up about thebackground images used on the Silverback site. […]
[…] How to recreate Silverback’s Parallax […]
[…] Vitamin Features » How to recreate Silverback’s Parallax Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site. (tags: css background parallax silverback) […]
Just wanted to post two more cents. My posts were never meant to be a “hater” post. From the article (as originally written, not how it is now) there is no indication that this was meant to be just an experimentation trick. The resize easter-egg was not even evident.
So my original complaint was assuming this article was a suggestion at an implementation for overlaying images to create pseudo-depth. For that purpose the implementation was poor IMHO. Since I misunderstood the goal then my comment can just be ignored.
If the only purpose to this implementation is to create a neat easter-egg trick for art sake then spend all the time you want and make the implementation anything you want. I just misunderstood the article and thought it was a implementation suggestion for web professionals instead of an artistic endeavor.
That being said I can’t but help comment on the statement “Many web designers choose not to use Flash so that everybody can access their website”. Flash has a very high implementation rate. Probably much higher than the supported browsers for this trick.
If the writer meant in terms of accessibility then Flash has that also now from what I hear (don’t know first hand).
The fact that it is not an open standard is my complaint. But in terms of availability I would think Flash would trump most modern CSS tricks like this.
Eric said:
For your info, the only thing which has changed about the article since your original comment is the emboldening of the sentence about resizing the window for the Easter-egg effect. That sentence was always there - nothing has been added to or removed from the article since it was originally published, as you imply.
Paul said:
> For your info, the only thing which has changed
> about the article since your original comment
> is the emboldening of the sentence about resizing
> the window for the Easter-egg effect
Which is what makes all the difference. Since I missed that sentence as being the central point in the article when I first read it (as well as others). I thought the article was on a creating pseudo-depth and was just wondering why not use an single image instead of all that markup, CSS and multiple image.
Now that I see the point in your article I say good for you. You put an easter egg on your website. Ranks right up there with the flight simulator in Excel.
Recently I have been wanting to redesign my site. I live near the mountains and have been collecting pictures for years.
Seeing this CSS wizardary gave me some cool ideas for the background of it.
I have skimmed over alot of the comments and seeing the flash stuff is kinda disappointing. “..Lets just do it in flash..”
Well that is a poor excuse and I suggest learning some CSS because Flash is getting boring.
Loved the tutorial.
When my site is done I will send you a link.
chris
Nice write-up Paul. Perhaps one more hat tip worth mentioning — Alex Walker did a similar write-up of this effect in January on the SitePoint blogs.
Lovely illustration using the technique, btw.
[…] La spiegazione per poterlo realizzare da queste parti. […]
This is an interesting effect.
Thank you very much for this tutorial. You got my bookmark!
Hats off to you sir! Great post!
[…] Se quiserem saber como reproduzir o efeito, o designer Paul Annett explica o processo de criao no artigo How to recreate Silverbacks Parallax. […]
I for one love it! And for those who question the “point”, this is 1) an artistic flair and 2) an experiment. Experiments are important - because an experiment today can lead to a truly useful innovation tomorrow, and new ways of developing technology can be inspired by experiments.
Yes, it serves no true content value, and yes, it bloats the markup, but the road to innovation is very bumpy. Heck, I’ve never seen anything like this, and it’s already changing the way I think about images on the web.
Nice effect!
True, not much utility as of now (like many have stated.. who resizes browser window, just to see the effect).. but it’s th proof of concept.
Proven.
…Now we could all just do a Flash animation and have the layers continuously scroll at different speeds or what ever effect of movement we’d want…AND poor IESixers would be able to view it too…but what would we have proved?! :P
Thanks for the link, mattymcg. I hadn’t seen that!
Um, like whatever.
I think everyone is overlooking the most important part of this technique: that Silverback Parallax is an awesome name to give a child. Imagine the register being read out in school - “Billy Nash… Jane O’Leary… Silverback Parallax!“. That kid would never stop being popular.
Nice technique, Paul. By the way, really loving the Silverback beta, great work Clearleft!
Very nice article, You have another reader in my person :-)
[…] There’s a discussion on how the quasi-3D effect was achieved using CSS + half-transparent PNG graphics — to me it reminds me the old video games; and looking at Steve, it instantly reminds me of Nintendo’s Donkey Kong! […]
[…] Има и дискусия по темата, как quasi-3D ефектът е постигнат само със CSS + полупрозрачни PNG файлове — на мен ми напомня на игрите от едно време; а гледайки симпатичния мумун, някак не мога да не се сетя за Donkey Kong на Nintendo! […]
What a fantastic looking effect. Going to try it out on my site.
[…] Also of note: Check out this cool little explainer on parallax scrolling as implemented on Clearleft’s Silverback app. Posted in Communication, Design, Email | […]
[…] If you haven’t seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool “parallax” 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. […]
I for one think it is an excellent piece of work, sure who resizes their browsers (other than Patrick Bateman) but to try to do something that’s never been realised or thought possible really earns the kudos!
Sterling work and I just can’t wait for Silverback to become live.
P.S.
love the monkey!
I’ve been thinking about doing something similar in JavaScript for a while. Sonic was also my inspiration. Silverbackapp.com provided the perfect opportunity for a bit of monkeying about.
Chuck the following JavaScript into Firebug and the vines will respond to mouse movements.
document.body.onmousemove = function(e) {
var x = e.clientX;
var fv = document.getElementById('frontvines');
var mv = document.getElementById('midvines');
var rv = document.body;
fv.style.backgroundPosition = (x * 1.5) + 'px 0px';
mv.style.backgroundPosition = (x * .4) + 'px 0px';
rv.style.backgroundPosition = (x * .2) + 'px 0px';
console.info(x);
}
[…] Erstaunlich nicht? Um so erstaunlicher, dass der Trick nur mit CSS und ein paar Bilder auskommt. Das ganze nennt sich Parallax Scrolling und wird im Artikel von Paul Annett von Clearleft, den Macher von Silverback, schön beschrieben. […]
[…] If you haven’t seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool “parallax” 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. […]
[…] Wenn ihr noch genaueres wissen wollt, schreibt mir einfach eine E-Mail oder lest euch folgenden Artikel durch (ist allerdings auf englisch): http://www.thinkvitamin.com/f[..]n/how-to-recreate-silverbacks-parallax […]
That is a very snazzy effect. But, how many people slowly resize their browser windows?
[…] If you haven’t seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool “parallax” 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. […]
[…] If you haven’t seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool “parallax” 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. […]
[…] Vitamin Features » How to recreate Silverback?s Parallax - […]
[…] Se siamo fortunati e non dobbiamo ottimizzare per IE6 (c’è sempre la soluzione di servire un Css alternativo), possiamo divertirci creando sfondi affascinanti per i nostri siti. Su Vitamin c’è un bel tutorial su come realizzare tutto ciò. L’effetto è quello di avere uno sfondo che sembra in “3D” e stringendo la finestra del browser lo si nota. E’ tutto basato su png, posizionamento e spostamento delle immagini. […]
[…] Read: How To Re-Create Silverback’s Parallax […]
[…] http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax […]
[…] For my first trick, I’ve adapted a beautiful technique created by Paul Annett of Clearleft used on the Silverback teaser page. Props to him for doing something awesome. […]
Terrific tutorial and as a few already mentioned, I think the illustration made this the best one yet among a handful. If you get a chance check out http://dromaeo.com/ which uses a similar header. They layers move at varying speeds though.
Fantastic, Paul. I was actually following the same mode of thinking while working on littlest Monster, although I ended up going a different direction with the design.
I just wanted to point out that this effect is absolutely possible to reproduce in IE6, using only CSS and the alphaImageLoader filter, for those who might be interested.
The two setbacks we need to overcome are 1, the lack of repeating PNGs and 2, the inability to position PNGs as background images. The first problem can be handled by simply making the image bigger. Yes, it’s not elegant. Neither is IE6. The second problem, of positioning background images, can be handled by positioning the containing div instead, by setting it’s margins in %s. It might not work in all cases, but more or less, the effect can be achieved.
[…] Another technique is explained in this article In the Lab: Doing strange things to CSS Backgrounds. The solution is to creatively use varying percentages for background image placement. The background appears to move when the browser window is resized. Or for a more polished example that uses a similar technique view this article How to recreate Silverback’s Parallax. […]