CSS question (or maybe just a web dev / graphic design question)

G

Got Haggis?

Veteran XX
I've seen a lot more sites doing this sort of thing:

Exclusive First Look at Xbox One | Gadget Lab | Wired.com

where the image stays in position when you scroll down the page and text scrolls over it. I like the effect. Is this just pure CSS? (appears that way from looking at page source) - is there some sort of technical name for this effect? Just wondered how this was done - i'm no CSS guru, but i like the effect.
 
it doesn't stay in position and it's not pure CSS

you can see it changes from a console image to a controller image

javascript is def involved
 
its no different than those fixed backgrounds with more on top

theres of course some logic to switch the image as you scroll
 
Its called parallax scrolling. yes there are libraries out there for it. Its typically just CSS and javascript, but i think its possible to do it with pure CSS, depending on the effect you are going for
 
The Xbox link is actually just a div with a background image that has position fixed on it. No javascript is needed to change images because you are looking at a different Div every time as you scroll. Its more of an optical illusion that makes it look a lot more complicated than it actually is.
 
Its not javascript. Disable javascript in your browser and it will still work.

all you need is the fixed position.
Code: 
background: url("http://www.wired.com/images_blogs/gadgetlab/2013/05/0521-tall-box-v1.jpg") repeat-y fixed 50% center transparent !important;
 
kraska said:
Its not javascript. Disable javascript in your browser and it will still work.

all you need is the fixed position.
Code: 
background: url("http://www.wired.com/images_blogs/gadgetlab/2013/05/0521-tall-box-v1.jpg") repeat-y fixed 50% center transparent !important;
Click to expand...

Great point.

The more I am thinking about this now, the more it makes me think theses three images are used as the background for a proportional number of divs starting at the top of the document and then going down. The 12 (random) seconds are split into four container divs. Each set of four divs has one of the images as it's background. Some of the divs within the container are transparent in order to view the background image.. almost like a "window" effect.
 
You must log in or register to reply here.
Back
Top