Is In Viewport Checker With Pure JavaScript – white-in-view

Preview:

Description:

white-in-view is a very small JavaScript library that checks if an element is in the viewport and adds matched CSS classes to it based on the current in or out state.

Install the white-in-view:

# NPM
$ npm install white-in-view
# Bower
$ bower install white-in-view

How to use it:

Import the white-in-view into your project or include the JavaScript file white-in-view.js in the document.

<script src="white-in-view.js"></script>

Create a new instance and specify the target element you want to keep track of the position.

var myInstance = new WhiteInView('.myElement');

Initialize the library.

myInstance.init();

That’s it. The library will automatically add the CSS class ‘white-is-in-view’ to your element when it comes into view so that you’re able to apply your own CSS styles or animations to it as follow:

.white-is-in-view { ... }

When the element is scrolled out of view, the CSS class ‘.white-is-out-view’ will be applied.

.white-is-out-view { ... }

Customize the Is In Viewport Checker with the following HTML5 ‘data’ attributes:

• data-offset-top=”50″: the vertical offset from the top
• data-offset-bottom=”150″: the vertical offset from the bottom
• data-percentage=”true”: whether the offset values are in percentage

<div class="myElement" 
     data-offset-top="50" 
     data-offset-bottom="150" 
     data-percentage="true">
     ...
</div>

Event listeners available.

document.querySelector('.myElement').addEventListener('whiteInView.onElementInView', function() {
  // Do something
});
document.querySelector('.myElement').addEventListener('whiteInView.onElementOutView', function() {
  // Do something
});