https://github.com/doodlewind/naivescroll
Tiny jQuery full page scroll effect plugin.
https://github.com/doodlewind/naivescroll
Last synced: 11 months ago
JSON representation
Tiny jQuery full page scroll effect plugin.
- Host: GitHub
- URL: https://github.com/doodlewind/naivescroll
- Owner: doodlewind
- Created: 2016-07-24T06:19:25.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-24T06:19:52.000Z (almost 10 years ago)
- Last Synced: 2025-04-07T10:11:10.455Z (over 1 year ago)
- Language: JavaScript
- Size: 31.3 KB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 `` 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.
``` html
```
### CSS
You can custom the HTML `` created above as you like. For example, you can use diffferent background images for each `` as below.
Firstly add some classes to distinguish each class.
``` html
```
Then custom each sections with your styles.
``` css
/* 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.
``` js
$(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.
``` js
$('#upBtn').click(function () {
$(this)._naiveScroll.triggerScroll(100);
});
$('#downBtn').click(function () {
$(this)._naiveScroll.triggerScroll(-100);
});
```
Have fun!