Trial.js
Simple library could monitor mouse position and predict user input
* No dependency
* ~1kb gzipped
* Auto extends methods for jQuery and Zepto
Usage:
npm install trial-js -S
<!--include Trial.js, then you ready to go!-->
<script src="node_modules/trial-js/trial.min.js"></script>
//if you are using webpack, you can load trial-js through script loader
require('script!trial-js')
//call a function when mouse enter elements' monitoring area
Trial(selector).enter(
{ distance: 100, cord: 'center'},
function(distance, ele, event){
//do something...
)
);
//if you are using jQuery or Zepto, Trial extends $.fn automatically
$(selector).enter(
{ distance: 100, cord: 'center'},
function(distance, ele, event){
//do something...
)
);
Examples:
Dynamically changing styles based on the distance between pointer and element
Trial(".block")
.within(
{distance: 500, cord: 'center'},
function(distance, ele, event){
ele.style.opacity = (500 - distance) / 500;
ele.style.transform = 'scale(' + (500 - distance) / 500 + ')';
}
)
.leave(
{distance: 500, cord: 'center'},
function (distance, ele, event) {
ele.style.opacity = 0;
}
)
Pre-fetching data before receiving user input
when mouse enter the red circle, pre-fetching details before user click the button
Trial(".btn")
.enter(
{distance: 150, cord: 'center'},
function(distance, ele, event){
fetch(url).then(function(data){
//do something ...
})
}
)
