jQuery Plugin For Fullscreen Scrolling Presentations - Alton
| File Size: | 12.3 KB |
|---|---|
| Views Total: | 14948 |
| 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.
