jQuery Plugin To Create A Fullscreen 'Hero' Header - oneScrollHeader

File Size: 7.23 KB
Views Total: 3816
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create A Fullscreen 'Hero' Header - oneScrollHeader

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.