footer-reveal.js - The popular 'reveal' footer effect made easy!

What is it?

footer-reveal.js is a jQuery plugin which allows you to apply that great 'fixed/reveal' effect to your footer quickly and easily.

Want to see it in action? Scroll down!

Usage

Download and add footer-reveal.js after jQuery, before your closing <body> tag.

<script src="jquery.min.js"></script>

<script src="footer-reveal.js"></script>

Then, in your JS file, call the footerReveal() function on your footer element. Like this:

$('footer').footerReveal();

You can also pass in the following options:

shadow

Type: Boolean

Turn the box shadow effect on or off.

Default: true

shadowOpacity

Type: Number (0 to 1)

Set the opacity of the box shadow.

Default: 0.8

zIndex

Type: Integer

Set a new z-index value for your footer.

Default: -100

Pass in options like this:

$('footer').footerReveal({ shadow: false, zIndex: -101 });

If the footer is taller than the viewport (on a landscape phone for example), the functionality of the plugin is disabled and your footer remains static.