Alton – jQuery Scrolljacking Plugin

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.

Alton – jQuery Scrolljacking Plugin

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.

Related post:  10 Inspiring Code Experiments on CodePen

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"&gt
        <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

Related post:  Webplate - A Framework Like No Other

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
Download Alton
Divi WordPress Theme

You may also like...

2 Responses

  1. Joe says:

    Hello! Love this functionality! Is there a way to disable the scroll jack once you scroll past the 4 hero slides so that the user can scroll normally once they get through the initial 3-4 fullscreen views? Please let me know, thanks!

    – Joe

  2. designify says:

    Hey Joe,
    Thanks for visiting. I love Alton as well, great plugin. I assume that you would like a native scrolling after the last slider… Unfortunately, this functionality is still not available. But the this functionality has already been requested on github. You can leave a request there as well and/or work with collaborators to figure it out – https://github.com/paper-leaf/alton/issues/23
    Sorry I haven’t helped you, I will think about it and give you a shout if I come up with something..

    Cheers,
    Petia

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close