import {isElementFullyInViewport} from 'viewport-overlap-checker';

const image = document.getElementById('img');

isElementFullyInViewport(image);
// true

import {isElementPartInViewport} from 'viewport-overlap-checker';

const image = document.getElementById('img');

isElementPartInViewport(image);
// true

import {isElementCloseToViewport} from 'viewport-overlap-checker';

const image = document.getElementById('img');

isElementCloseToViewport(image, {top: 10});
// true

// this means the margin between top of element and bottom of viewport is no more than 10px;

// if we used it like isElementCloseToViewport(image, {top: 10, left: 20});
// this means the left of element is close to left of viewport in 20px AND top is close to bottom
// of viewport in 10px.

// Trikcy: the {top, bottom, left, right} values can be negative so you can restrict 
// the element is in center of viewport.