Quantcast
Channel: jQuery Plugins – Designify
Viewing all articles
Browse latest Browse all 82

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

$
0
0

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:

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.

Download Footer Reveal

Viewing all articles
Browse latest Browse all 82

Latest Images

Trending Articles



Latest Images