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

Category: Javascript | February 8, 2019
Author: russellgoldenberg
Views Total: 1,953
Official Page: Go to website
Last Update: February 8, 2019
License: MIT

Preview:

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

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.0 (02/08/2019)

  • progress 0 and 1

v1.0.0 (06/26/2018)

  • Added exit view

You Might Be Interested In:


Leave a Reply