Fade Out Hero Header On Scroll - jQuery headerFade.js
File Size: | 4.25 KB |
---|---|
Views Total: | 2312 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

headerFade.js is a dead simple jQuery plugin which makes it possible to fade out hero header on scroll using CSS transform, transition and opacity properties.
How to use it:
1. Create a hero header for your web page.
<section id="hero"> <div id="hero-mask"></div> <header id="title-fade"> <h1>Here is some header text</h1> </header> </section>
2. The example CSS for the hero header.
header { position: relative; top: 50%; transform: translate(0, -50%) z-index: 2; } #hero-mask { background-color: rgba(0,0,0,0.7); height: inherit; left: 0; position: absolute; opacity: 0; top: 0; transform: translate3d(0, 0, 0); width: 100%; }
3. Include jQuery library and the JavaScript file jQuery headerFade.js
right before the closing body
tag.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="headerFade.js"></script>
4. Initialize the plugin on document ready and you're done.
$(document).ready(function() { $('#hero').heroFade(); });
This awesome jQuery plugin is developed by beeeees. For more Advanced Usages, please check the demo page or visit the official website.