📜 scrolls.js 📜

Universal DOM Scrolling Animation Callback Engine

Live Example

https://pryme8.github.io/scrolls.js/

Download

You can grab the js file from the __GitHub__ src folder
https://raw.githubusercontent.com/Pryme8/scrolls.js/master/src/scrolls.js

Do an __CLI__ install
> npm i @pryme8/scrolls.js

This is not for running on a node, but rather should have its src included through the following install directions.

Get from a CDN

Full https://cdn.jsdelivr.net/npm/@pryme8/scrolls.js/src/scrolls.js

Min https://cdn.jsdelivr.net/npm/@pryme8/scrolls.js/src/scrolls.min.js

Installation

Include the __core__ library in your Web Document:
``html

`
And you're all set!

Usage

Initialize the Scroll Object
`html

``

You are now all set! Create as many flags as you want until you see a performance drop on the page.

Check the Examples for ideas on how to use the Scroll Engine!

$3

Targets can be any Javascript Object, Dom Element etc.

$3

When creating a flag you have a few arguments are your disposal use these to change the way the flag behaves.

___start___:Number
> The pxl value of the start of the flag

___duration___:Number
> The pxl value of the length of the flag

___callback___:function
> The callback must have the constructors of (value,target) how you handle those values is completly up to you.
> For example a valid callback value would be:
> __(value,target)=>{console.log(value)}__

___startDirty___:Boolean
> Marks the flag dirty if true and updates upon initilization

___debug___:Boolean
> Creates DOM element to show the flag, to help with page design.


###TODO

- Single Direction Animations
- Event Listeners for when the Trigger has been entered and left. Progress is kinda built into the callback structure.

----

> Presented by DigitalOrigami.

> Created by Pryme8.

> Readme written with StackEdit.