jQuery Plugin For Fullscreen Scrolling Presentations - Alton

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

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.