👀Element view notifier
See appear event instead. For React hook, see useAppear. For React components, see react-lifecycle-appear.
Element impression, for ads or user behaviour statistics.
Written in es6 javascript, published as npm package as es5 along with a browser standalone.
IE9+, chrome, safari, firefox, opera...
npm install @vivaxy/impression
<script src="./bundle/impression.rollup.js"></script>
<script src="./bundle/impression.webpack.js"></script>
import Impression from '@vivaxy/impression';
const impression = new Impression();
const element = document.querySelector('#test');
impression.isViewable(element); // => true
impression.on('begin', '#test', (element) => {
console.log(`element shown into view`, element);
});
impression.on('end', '#test', (element) => {
console.log(`element shown out of view`, element);
});
impression.scan(); // flush current viewable element
Impression
=> {Impression}
Initialize the instance.
const impression = new Impression(options)
isViewable
=> {Boolean}
Test if an element is viewable.
impression.isViewable(element)
Only accepts a single element.
on
=> {Impression}
Listen when elements match selector enter or leave the view.
impression.on(event, selector, callback)
callback(element, { type, direction })
off
=> {Impression}
Remove listeners.
impression.off(event, selector, callback)
impression.off(event, selector)
impression.off(event)
impression.off()
scan
=> {Impression}
Scan page to update element status.
impression.scan()
once
=> {Impression}
impression.once(event, selector, callback)
attach
=> {Impression}
impression.attach()
detach
=> {Impression}
impression.detach()
onObservers
=> {Impression}
impression.onObservers(type, callback)
onceObservers
=> {Impression}
impression.onceObservers(type, callback)
offObservers
=> {Impression}
impression.offObservers(type, callback)
impression.offObservers(type)
impression.offObservers()
The number of pixels an element is allowed to enter its container boundaries before calling its callback.
default 0
The number of milliseconds to wait before calling an element's callback after the changes.
default 100
The container of the elements you want to track.
default window
impression.on('begin', '[data-impression-uniqueid="1"]', (element, { type }) => {
// => which element begins to impression
// => the cause of the change
});
impression.on('end', '[data-impression-uniqueid="1"]', (element, { type }) => {
// => which element's impression ends
// => the cause of the change
});