jQuery Plugin For Fullscreen Scrolling Presentations - Alton
File Size: | 12.3 KB |
---|---|
Views Total: | 15039 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Alton is a brand new jQuery vertical full page scrolling plugin for presenting galleries of work, features & benefits of software or services, or anything else on your website. Licensed under the GPL v3.
Basic Usage:
1. Load jQuery library and the jQuery alton plugin on your webpage.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.alton.js"></script>
2. Create sectioned content you wish to present and navigate through as follows.
<body class="pageWrapper"> <section class="full"> <div class="slide">Section One</div> <div class="slide">Section Two</div> <div class="slide">Section Three</div> ... </section> </body>
3. Call the plugin with options.
$(document).alton({ // The full height container fullSlideContainer: 'full', // The full height slide class singleSlideClass: 'slide', // Enable side navigation useSlideNumbers: true, // Set the outside color of the pagination items slideNumbersBorderColor: '#fff', // Set the inner color of the pagination items (not active) slideNumbersColor: 'transparent', // The body class bodyContainer: 'pageWrapper', });
4. The full plugin options.
// Classname of the first element in your page content firstClass : 'header', // The full height container fullSlideContainer: 'full', // The full height slide class singleSlideClass: 'slide', // Set the first element in the first page series. nextElement : 'div', // null when starting at the top. // Will be updated based on current postion previousClass : null, // last block to scroll to lastClass: 'footer', // Enable side navigation useSlideNumbers: true, // ID of Slide Numbers slideNumbersContainer: 'slide-numbers', // Set the outside color of the pagination items slideNumbersBorderColor: '#fff', // Set the inner color of the pagination items (not active) slideNumbersColor: 'transparent', // Choose scroll mode // headerScroll, featuredScroll scrollMode: 'featuredScroll', // The body class bodyContainer: 'pageWrapper',
Change logs:
2017-01-10
- v1.2.1
2015-11-24
- JS update.
2015-09-29
- Fix for firefox
2015-07-04
- Better scroll tracking, better mobile layouts
2015-05-04
- Added in better keyboard support for home/end buttons, and removed
This awesome jQuery plugin is developed by paper-leaf. For more Advanced Usages, please check the demo page or visit the official website.