0.1.4 • Published 4 years ago
slide-scroll v0.1.4
SlideScroll v0.1.3
A javascript vertical page scroll animation library.
SlideScroll is an animating version of window.scrollTo()
that only applies to vertical directions.
Download
Installation
Option 1: HTML
<script src="SlideScroll.min.js"></script>
Option 2: NPM
$ npm i slide-scroll --save
Quick Start
// animation duration is 500ms.
var slide_scroll = new SlideScroll({duration: 500});
// scrolling to 100px from page top.
slide_scroll.to(100, function(){
// callback
});
APIs
SlideScroll()
SlideScroll constructor.
Syntax:
Arguments:
settings
{object} (optional)SlideScroll
settings for initialization.Parameters for `settings`: | Parameter | Type | Default | Description | | ----------- | --------- | ------- | ----------- | | `duration` | *integer* | 400 | Scroll animation duration in milliseconds | | `el` | *string* | window | Target DOM element to scroll | | `watchMode` | *boolean* | false | If `watchMode` is enabled, `.to()` method will animate scroll only when it is followed by `.watch()` method. `watchMode` is often used when it is discouraged for SlideScroll to create another `requestAnimationFrame` by itself as there is already existing `rAF` in the page. |
.to()
Scroll to the specific position of the target element.
Syntax:
Arguments:
scroll_top
{integer} Target scroll position to animate toward.callback
{function} (optional) Callback functioncallback_arguments
{Array} (optional) Arguments array for callback function
.watch()
Trigger scroll animation in watchMode
. This method is to be used in an already existing requestAnimationFrame
in the page. It is required to set watchMode = true
in the constructor settings.
Syntax:
Example:
/**
* `watchMode` enabled.
*/
var slide_scroll = new SlideScroll({watchMode: true});
/**
* By running `render()`, it constantly calls
* `slide_scroll.watch()` method.
*/
var render = function() {
slide_scroll.watch();
window.requestAnimationFrame(render);
};
render();
/**
* Scrolls to 100px scroll top.
* `.to()` method is constantly watched by `.watch()`.
*/
slide_scroll.to(100);
Above example is identical to the below example in normal mode, which uses its own requestAnimationFrame
internally.
var slide_scroll = new SlideScroll();
slide_scroll.to(100);
Browser Support
Scrawler supports all major modern browsers including IE 10+.
License
MIT