Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
js
 
 
 
 
 
 

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);
});

Have fun!

About

Tiny jQuery full page scroll effect plugin.

Resources

Releases

No releases published

Packages

No packages published