Tiny jQuery full page scroll effect plugin.
Tiny jQuery full page scroll effect plugin.
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>
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;
}
Once you finish the static content, you can easily enable naiveScroll with jQuery.
Just call init
method and test it out.
$(this)._naiveScroll.init();
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!