naivescroll's Introduction

naiveScroll

Tiny jQuery full page scroll effect plugin.

Features

Override mouse whell event to scroll full page.
Minimum extra HTML elements required.
Prevents redundant events from being triggered.
Provide API to manually scroll up or down.
Tiny size, 1KB zipped.

Usage

HTML

Simply use basic <section> element to contain the pages you need to scroll. No other class or properties is required. You can also modify JS code to use other DOM element as container.

<body>
    <section></section>
    <section></section>
    <section></section>
</body>

CSS

You can custom the HTML <section> created above as you like. For example, you can use diffferent background images for each <section> as below.

Firstly add some classes to distinguish each class.

<body>
    <section class="page1"></section>
    <section class="page2"></section>
    <section class="page3"></section>
</body>

Then custom each sections with your styles.

/* use background color */
.page1 {
    top: 0;
    background-color: lightcoral;
}

/* or use background image */
.page2 {
    top: 100%;
    background: url("foo.jpg") no-repeat center center;
    background-size: cover;
}

/* notice the top property */
.page3 {
    top: 200%;
    background-color: lightblue;
}

JS

Once you finish the static content, you can easily enable naiveScroll with jQuery.

Enable mouse wheel scroll effect

Just call init method and test it out.

$(this)._naiveScroll.init();

Bind scroll effect to other events

Now naiveScroll only supports scroll up or down one page per time. You can modify its source code to support your compenents.

$('#upBtn').click(function () {
    $(this)._naiveScroll.triggerScroll(100);
});
    
$('#downBtn').click(function () {
    $(this)._naiveScroll.triggerScroll(-100);
});