I've noticed this on a lot of sites lately. Does anyone know how to do it?

Pompous

Click here, scroll about half way down and you will see it. The image of the bar scrolls at half of the speed of the rest of the page, creating an illusion of a third dimension.

It's really cool and I'd love to add it to the site I'm making at the moment, but I don't have any clue how to do it or even what keywords to search in google in order to find out.

Any help would be greatly appreciated.

Atomic Pineapple

Its called Parallax Scrolling - https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

catallus

Now I want a Chinese

Well played OP.

Pompous

Excellent thanks!

EIREHotspur

It can be a nice effect.....just be carefull to preview your Responsive pages on mobile....I found parallax can mess those up if not done right.

Pompous

Thanks for the tip, although my site doesn't have to be compatible with mobiles. It's a second year computer science project and I'm not sure if I'm even going to be able to pull off paralax scrolling. It's very complicated. I will certainly try, though.

Aswerty

Personally I think it looks very gimmicky. I'm not too sure if that's a commonly held perception though. It reminds me of power point slides with spinning text.

BrokenArrows

Aswerty wrote: »

Personally I think it looks very gimmicky. I'm not too sure if that's a commonly held perception though. It reminds me of power point slides with spinning text.

I agree with it being gimmicky but it depends on the website.
Not a great idea for an information website but looks nice and probably works well for bars/restaurants who need to go for style over substance.

bpmurray

Aswerty wrote: »

Personally I think it looks very gimmicky. I'm not too sure if that's a commonly held perception though. It reminds me of power point slides with spinning text.

It's commonly used in one-page websites and it is very effective in that situation, where scrolling down the page gives a different effect similar to a page turn.

Aswerty

bpmurray wrote: »

It's commonly used in one-page websites and it is very effective in that situation, where scrolling down the page gives a different effect similar to a page turn.

Effective at what? Also correct me if I'm wrong but the page jumping isn't the same thing as parallax. It's just another nightmarish fad that favours form over function.

This is how one of these types of pages is done well.

Below are two other terrible techniques I'd lump in with Parallax (including the aforementioned page jumping).

Page Jumping:
http://onlinedepartment.nl/

And the worst offender; scrolling up/down is mapped to left/right:
http://www.dasselundwagner.com/en/

bpmurray

Well, I prefer the more fluid examples.

Atomic Pineapple

It's hard to do the Parallax scrolling effect right and along with other effects mentioned it is overused way too much and can be added to a website just for the sake of it when it doesn't suit the website. That said if it suits the website and is done nicely I like it (rare case though)

Another option if you want to give your website a feeling of being more alive then add some subtle animations? Maybe something like this - http://www.mashboard.com/

Pompous

Atomic Pineapple wrote: »

Another option if you want to give your website a feeling of being more alive then add some subtle animations? Maybe something like this - http://www.mashboard.com/

Can you do stuff like that using css?

Atomic Pineapple

Pompous wrote: »

Can you do stuff like that using css?

Sure, depending on browser support you should be able to add animations using CSS - http://www.w3schools.com/css/css3_animations.asp

Banta

There's quite a few techniques for CSS only implementations of the parallax effect.

The css only implementation sort of started here: http://keithclark.co.uk/articles/pure-css-parallax-websites/ and was then adapted a bit here: http://codepen.io/scottkellum/details/bHEcA

However, as with everything, the problem is support. The "vh" element has a lot of issues with iOS devices for example. I understand that's not important for OP right now, but for anyone else reading the thread I've included it. You can check the "Can I Use" site for support. So for example for the vh element http://caniuse.com/#search=vh

The Keith Clark link, for example, doesn't work on IE11 and below as the transform-style: preserve-3d isn't supported.

OK, I'm just getting depressed now on who supports what and where now again, having had to go through this on a client's site recently and was constantly having to workaround / fix something after thinking "ooh lovely, CSS only". A lot of .js scripts for this also have issues on some devices.

So, to OP, yep you can do it. Called 'parallax' as has already been pointed out previously. If it's just for a project and you know the exact devices, OS's and browsers it'll be viewed on, then you can implement it easy enough. For anyone else, lots of testing of various different implementations on different devices etc. will be required. Fun fun!