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.
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:
shadowType: Boolean
Turn the box shadow effect on or off.
Default: true
shadowOpacityType: Number (0 to 1)
Set the opacity of the box shadow.
Default: 0.8
zIndexType: 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.
Download Footer Reveal