A lightweight jQuery Scrolljacking plugin which creates a unique and enjoyable online experience for users.
Alton is a new jQuery plugin created by Paper Leaf.
It is a scrolling plugin which employs 100% width and height, vertical scrolling effects so web content is presented and navigated through in a rather unique way.
The scrolljacking idea is exploited to the extend that the whole scrolljacking experience is greatly implemented to provide an excellent user interaction.
What is scrolljacking?
The native scrolling, we are used to for so long, is replaced with targetted scrolling which is called scrolljacking. It means that when used starts scrolling, scrolljacking takes them to a specific vertical point on the web page (e.g the beginning of the next container). Scrolljacking is tempting to use as it creates a quite different and enjoyable online scrolling experience.
Why is Alton so unique?
Alton comes with three functionality types – Standard, Bookend and Hero. Standard version makes a featured area in the middle section of 100% height and when you scroll it leads you to the next one. Bookend allows you to create a bookend experience that seamlessly shows full height sections. Hero Scroll allows you to scrolljack to the Hero Section only, no matter wherein the page you are. It will guide you back to the top of the section which follows the Hero one and re-enable the native scrolling for the rest.
Alton uses 100% height containers which are extremely useful if you need to create a powerful visual presentation. It is very easy to implement/use and lightweight.
Alton Demos
Standard Alton Bookend Alton Hero Alton
Getting Started
Standard Functionality
To get started, you will need a basic HTML structure such as this one below:
<body class="pageWrapper">
<section class="full">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</section>
</body>The following JavaScript code needs to be added to the page you want scrolljacking to occur. Bear in mind that you will need to put it on that page so you will avoid any errors.
$(document).alton({
fullSlideContainer: 'full', // Tell Alton the full height container
singleSlideClass: 'slide', // Tell Alton the full height slide class
useSlideNumbers: true, // Set to false if you don't want to use pagination
slideNumbersBorderColor: '#fff', // Set the outside color of the pagination items
slideNumbersColor: 'transparent', // Set the inner color of the pagination items
bodyContainer: 'pageWrapper', // Tell Alton the body class
});
Bookend Functionality
The idea here is to have two end pieces – header and footer – or bookends alongside with a featured area for some visual or text content. The middle content, between the two bookends is set 100% height but the bookends themselves can be set to any height you want.
Here is the basic HTML structure for a Bookend Functionality:
<body class="pageWrapper">
<!-- Set the height for bookends. We left this in your hands so choose wisely -->
<header class="header" style="height:500px;"></header>
<section class="full">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</section>
<footer class="footer" style="height:500px;"></footer>
</body>Include the JavaScript code to trigger the scrolljacking. Again pay attention to put it only to the page where scrolljacking is present.
$(document).alton({
fullSlideContainer: 'full', // Tell Alton the full height container
singleSlideClass: 'slide', // Tell Alton the full height slide class
useSlideNumbers: true, // Set to false if you don't want to use pagination
slideNumbersBorderColor: '#fff', // Set the outside color of the pagination items
slideNumbersColor: 'transparent', // Set the inner color of the pagination items
bodyContainer: 'pageWrapper', // Tell Alton the body class
});Hero Functionality
The Hero functionality focuses on applying scrolljacking to the top Hero container. The scroll movement action initiated by the user, takes them to the top of the next section of content and the native scrolling is enabled.
Here is the Hero functionality HTML sctructure:
<section class="header">
<!-- Insert Header Content Here -->
</section>
<section class="pageWrapper">
<!-- Insert Regular Content Here -->
</section>The needed JavaScript code:
$(document).alton({
firstClass : 'header', // Set the first container class
bodyContainer: 'pageWrapper', // Set the body container
scrollMode: 'headerScroll', // Set the scroll mode
});Here is the list of options available:
firstClass : 'header', // classname of the first element in your page content
fullSlideContainer : 'full', // full page elements container for
singleSlideClass : 'slide', // class for each individual slide
nextElement : 'div', // set the first element in the first page series.
previousClass : null, // null when starting at the top. Will be updated based on current postion
lastClass: 'footer', // last block to scroll to
slideNumbersContainer: 'slide-numbers', // ID of Slide Numbers
bodyContainer: 'pageWrapper', // ID of content container
scrollMode: 'featuredScroll', // Choose scroll mode
useSlideNumbers: false, // Enable or disable slider
slideNumbersBorderColor: '#fff', // outside color for slide numbers
slideNumbersColor: '#000', // interior color when slide numbers inactive