1.0.2 • Published 6 years ago
way-on-screen v1.0.2
Simple plugin for detection when the item on the screen (by bottom lane) and show in percentages how much of the item shows on the screen.
Installation
$ npm install --save way-on-screen
Usage
Webpack
var WayOnScreen = require('way-on-screen');
//or
import WayOnScreen from 'way-on-screen';
// run module here
Old school files way (example.html):
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="RUN_MODULE_HERE.js"></script>
Running
var DetectItemOnSceen = new WayOnScreen(css-selector, options);
DetectItemOnSceen.init();
// options reference in next section
Parameters (options)
{
//Set, in percent, the entry point from the bottom of the screen.
threshold: 30 //a number
//Callback funcitons
//argument is an object with current item (section), percent (percent) and direction (direction).
onEnter: function(props)
onExit: function(props)
onScroll: function(props)
}
Methods
init
Method for initialize detection.
DetectItemOnScreen.init();
onScroll (callback)
Calls every time on scroll when the top of the element offset more than or equal to the start point (at the bottom of the screen) and the lower bound of the element offset is less than or equal to the start point.
DetectItemOnScreen.onScroll(function(props) {
console.log(props);
});
onEnter (callback)
Calls when the top of the element offset more than or equal to the start point (at the bottom of the screen)
DetectItemOnScreen.onEnter(function(props) {
console.log(props);
});
onExit (callback)
Calls when the lower bound of the element offset is less than or equal to the start point (at the bottom of the screen)
DetectItemOnScreen.onExit(function(props) {
console.log(props);
});