creating an 'under the rug' parallax footer?

Question

I'm outrageously new to asking questions on this site but have learnt a huge amount from reading it so thanks a lot!

Bit of a random one, saw this awesome 'under the rug' style parallax effect on this footer - and looking for some pointers as to how it could be knocked up?

http://ideaware.co/our_work

Any assistance much appreciated!!!

Answer 1

Pretty easy! Make a footer that is positionated absolute and has a lower z-index than the main content. Than put this in the css of the div that you just created : position:fixed . Also don't forget to make the high of the content div a bit shorter so the footer will be seen.

Good luck!

Too vague? Just ask and i will answer!

[edit]:

fiddle example

For the example i will use a simple HTML page which will contain two divs. The fist one will be the #content container and the second will be the #footer.

<div id="content">
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero felis quis nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim eros nisi, ut vehicula nulla dictum vel. Aenean quis felis libero. Aliquam vulputate sem eros, sed vehicula sem tincidunt vel.</p>
 </div>

//I added some text in the footer so you can actually see the parallax effect

I added to the content div the fallowing CSS :

     #content {
    width:100%;
    height:1500px;
    margin-bottom:200px;
    background-color:#123456;
       }

Be careful to set the margin-bottom property to be equal to your footer height. Otherwise you wont be able to see the #footer div.

The css for the footer is:

   #footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:200px;
    z-index:-1;
    background-color:#000;
       }    

Note the fact that the position is set to fixed. That will keep the #footer positioned relative to the window, not relative to the document. Also i set the z-index:-1. I did that so the #footer will be under the #content. If you remove this property you will notice that the #footer will be over the #content all the time and the effect of parallax is lost.

So yeah! This is all.

Answer 2

Without a fixed height on the footer, fluid to content, you could use (jQuery):

var footerParaHeight = $(".footer").height();
$(".content").css("margin-bottom",footerParaHeight);

With the CSS given earlier:

.content {
    /*margin being given from jQuery*/
}
.footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}