JavaScript Library To Detects If Elements Are In View – enter-view.js

Preview:

Description:

enter-view.js is a pure JavaScript library that for the detection of HTML elements within the browser viewport.

Also provides a callback executed when a specified element is scrolled into of out of view so that you can apply a custom CSS class to it.

How to use it:

Add the enter-view.js JavaScript file into your html page.

<script src='enter-view.min.js'></script>

Add the CSS class ‘enter’ to element ‘selector’ once it has been scrolled into view.

enterView({
  selector: 'selector',
  enter: function(el) {
    el.classList.add('entered');
  }
});

Add an offset to the scroll position detection.

enterView({
  selector: 'selector',
  offset: '25%',
  trigger: function(el) {
    el.classList.add('entered');
  }
});

Execute a callback when the element is scrolled out of view.

enterView({
  selector: 'selector',
  exit: function(el) {
    el.classList.add('exited');
  }
});

Decide whether or not to trigger the callback just once.

enterView({
  selector: 'selector',
  enter: function(el) {
    el.classList.add('entered');
  },
  once: true // default: false
});

Changelog:

v2.0.1 (10/14/2022)

• Bugfix

v2.0.0 (02/08/2019)

• progress 0 and 1

v1.0.0 (06/26/2018)

• Added exit view