Thin change of background image

Question

I’ve been trying to find an answer through Google for a while, but to no avail.

I found an interesting feature on the site: http://dicksonfong.com/

The function includes a background image that appears to change from the bottom when a section passes the screen. I can’t describe it better, so I probably don’t get hits on Google.

Can someone determine what is called this trick, and where can I find the source code to implement something like this?

Thanks in advance.

Simon

Answer 1

This is called the scrolling effect of Parallax . It looks very creative in terms of user interface and involves a lot of work in it. If you want to get started, here's a perfect run example .

Hope this helps.

Answer 2

There is a good JavaScript library called skrollr for creating scrolling parallax websites.

This requires you to know only HTML and CSS .

More examples .

Answer 3

The above answers about Parallax are incorrect. Parallax really creates amazing websites. However, the one you contacted ( http://dicksonfong.com/ ) does not use it. This is because Parallax happens when you have several levels moving at different speeds.

Imagine your scroll speed is 100%. If the image moves with the entire page, it moves at a speed of 100%. If he does not move at all, he moves by 0%. If it moves at half speed, 50%. Parallax includes several speeds. A Dixon site just has content moving with 100% and a background moving either 100% or 0%. Since 0% means motionless, there is only one speed of movement of moving objects.

However, this is still a cool website, and since it is simpler, it’s easier to create, requiring zero javascript (or HTML5). It just uses fixed backgrounds and absolute positioning. Its first and third lines have fixed backgrounds. This allows them to stay in place.

Code example:

HTML:

 <div id="home" class="page"> <div class="content"> <h1>First Page</h1> Content here! </div> </div> <div class="divider"> <div class="content">Divider</div> </div> <div id="about" class="page"> <div class="content"> <h1>First Page</h1> Content here. </div> </div> 

CSS

 body{ margin:0; padding:0; font-size:80px; font-family:Calibri; font-weight:bold; text-align:center; text-shadow:0px 0px 4px white; } .page { margin: 0 auto; width: 100%; max-width: 1920px; position: relative; height: 800px; } .divider { height: 300px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } .page .content { height: 450px; top: 100px; position: absolute; width: 100%; } .divider .content { padding-top:50px; height: 250px; position: absolute; width: 100%; } #home { background: url(background_home.jpg) no-repeat fixed 50% 0 / cover; } #about { background: url(background_about.jpg) no-repeat fixed 50% 0 / cover; } 

Working demo: http://jsfiddle.net/6Hck4/1/