Pezull.js is a Javascript library which simulates hover effect on touch devices It works by selecting the 'active area', where the selected class is added to the elements entering it.
Install pezull.js using your favorite package manager.
Install with npm:
npm install pezull
Install with yarn:
yarn add pezull
Pezull.js sets an active area, and on scroll listens for elements with the 'pezull' class to enter it. On enter, the class 'hovering' is added to those elements, and on leave, it is removed. pezull and hovering are the default classes and can be altered by passing them on the options object.
Import the library:
var Pezull = require('pezull').default;
Initialize it:
Pezull();
Add your custom css to the active class
.hovering {
background: rebeccapurple;
color: white;
}
Pezull accepts an options object to alter the way it works. You can see the default options below
Pezull({
activeAreaTop: '20vh',
activeAreaHeight: '60vh',
breakpoint: 767,
activeClass: 'hovering',
listenerClass: 'pezull',
dev: false,
touchOnly: false
});
default: : '20vh' Sets the offset of the active area from the top of the screen. Accepts a {number} or a {String} of css units (at the moment supports 'px', 'vw', and 'vh') When passing a number, it will be considered as pixels.
default: : '60vh' Sets the height of the active area. Accepts a {number} or a {String} of css units (at the moment supports 'px', 'vw', and 'vh') When passing a number, it will be considered as pixels.
default: : 767 Sets the maximum width of the viewport for pezull to be initialized. Accepts a {number} which is considered as pixels.
default: : 'hovering' Class which will be added to the elements that are inside the active area. Accepts a {String}.
default: : 'pezull' Class which needs to be added to the chosen elements, for the active class to be added to them on enter of the active area. Accepts a {String}.
default: : false Visualizes the ac21tive area to make implementation easier. Accepts a {boolean}.
default: : true Initializes pezull only if its on a touch device.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.