Skip to content

doodlewind/naiveScroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commits
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published