Anyone know how to recreate this photo effect?

[tj2419]

Home | West Cheshire College

 

I want to copy this photo effect i don't need it to do it with a slider but just a photo moving behind the background.

 

Cheers

Edited February 4, 2013 by tj2419

[dhicks]

I want to copy this photo effect

 

The effect you're looking for is called parallax scrolling (as featured in cutting-edge scrolling arcade games in about 1985). You can have a rummage through the page source of the above link, or there now seems to be a JQuery plugin to help you out:

 

jQuery.parallax

 

I'm guessing the basic idea would be to define two (or more) DIVs and, on one's onscroll event, scroll the other one a different amount. A Google search for "jquery parallax" seems to bring up a bunch of pretty decent-looking tutorials.

[carvjo]

There is a tutorail and code on GitHub

 

https://github.com/richardshepherd/Parallax-Scrolling

[sonofsanta]

Looks like you've got to be careful with your photo selection there though. The first photo works fine, but the third one becomes boring when scrolled, and the fourth one just looks pervy when you're at the top of the page...

 

(1280 x 1024)