Footer-reveal.js – Add An Eye-catching Effect to Your Website

Footer-reveal.js – Add Aa Eye-catching Effect to Your Website

Recently, around the web a new attractive effect emerged and designers/developers are willing to give it a try and incorporate it on their websites. The “Footer Reveal” is a straightforward idea that add a bit more appeal to web pages. As the parallax trick, it creates a bit of interactivity to otherwise ordinary website design.

Now, there is a JS plugin which can easily help this effect to be implemented without much effort. Let’s have a look how to use it.


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:


You can also pass in the following options:


Type: Boolean
Turn the box shadow effect on or off.
Default: true


Type: Number (0 to 1)
Set the opacity of the box shadow.
Default: 0.8


Type: Integer
Set a new z-index value for your footer.
Default: -100

Pass in options like this:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

$('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.

Download Footer Reveal

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *