jQuery Plugin To Create A Fullscreen 'Hero' Header - oneScrollHeader
File Size: | 7.23 KB |
---|---|
Views Total: | 3843 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
oneScrollHeader is a jQuery plugin that allows you to create a fullscreen, smoothly scrolling 'Hero' header for your website. The 'Hero' header will automatically scroll to the next content section once you perform mouse wheel or touch swipe on the screen.
How to use it:
1. Include both jQuery JavaScript library and the jQuery oneScrollHeader plugin on the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="dist/jquery.oneScrollHeader.js"></script>
2. Create a 'Hero' DIV for your site header.
<div class="header"> It's header </div>
3. Just simply call the function on the DIV element and we're done.
$('.header').oneScrollHeader();
4. Style the 'Hero' header whatever you like.
.header { ... }
This awesome jQuery plugin is developed by Yura-ka. For more Advanced Usages, please check the demo page or visit the official website.