Pezull.js

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.

Demo

Installation

Install pezull.js using your favorite package manager.

Install with npm:

npm install pezull

Install with yarn:

yarn add pezull

Using with cdn

https://unpkg.com/pezull

How it works

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.

Usage

Import the library:

var Pezull = require('pezull').default;

Initialize it:

Pezull();

Add your custom css to the active class

.hovering {  
    background: rebeccapurple;
    color: white;
}

Options

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
});

activeAreaTop

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.

activeAreaHeight

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.

breakpoint

default: : 767 Sets the maximum width of the viewport for pezull to be initialized. Accepts a {number} which is considered as pixels.

activeClass

default: : 'hovering' Class which will be added to the elements that are inside the active area. Accepts a {String}.

listenerClass

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}.

dev

default: : false Visualizes the ac21tive area to make implementation easier. Accepts a {boolean}.

touchOnly

default: : true Initializes pezull only if its on a touch device.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.