I currently have a fixed background which is a picture of stars on this website. The background however looks very stuck and gives off a web 1.0 sort of vibe.

What I would like for it to do would be to give the illusion of movement by slowly scrolling relative to where the user scrolls on the webpage. For instance, objects that are further away usually appear to move slower that objects that are closer. What I want, is for the stars to only move a little bit when the user scrolls, while the page content moves a large amount.

It's hard to explain, but I hope that was clear. Any suggestions?

3 answers

This was chosen as the best answer


After doing a little searching around based on the links you guys provided I found a perfect example. Thank you very much.

Answered almost 8 years ago by Immanu'el Smith
  • Great link, thanks. I think ultimately, however, make sure it works well with the scroll wheel - as that is probably how most people scroll the page these days. That particular example doesn't work particularly well for me when using the wheel. w3d almost 8 years ago

I THINK you are looking for a sort of modified parallax effect. You might want to check out http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/ .. basically move different layers are different speeds.

Answered almost 8 years ago by Lynn Wallenstein

So i think LLynn put you in the right direction, but if you check out the websites that already implement this feature you can see that the effect can only be achieved while resizing your browser, not while scrolling.

tutorial. Check this one out, try it. I'm sorry, but the idea you have in mind cant be done with css.

Chrome Experiments Check out here for HTML5, CSS3, Javascript showcases, if you are willing to experiment with those, you might achieve the effect for your visitors capable of seeing this kind of feature.

Answered almost 8 years ago by Menno Geelen