Enter-view.js Demo

Dependency-free JavaScript library to detect when element enters into view

Start scrolling to see examples.

Default (no offset)


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

.block-a

50% offset


					enterView({
 selector: '.block-b',
 offset: 0.5,
 enter: function(el) {
  el.classList.add('entered');
 }
});

.block-b

75% offset, trigger every time


					var count = 0;
enterView({
 selector: '.block-c',
 offset: '0.75,
 enter: function(el) {
  el.classList.add('entered');
  count += 1;
  el.querySelector('span').innerText = count;
 }
});

.block-c (0)

Multiple elements, 50% offset


					enterView({
 selector: '.block-d',
 offset: 0.5,
 enter: function(el) {
  el.classList.add('entered');
 }
});

.block-d

Exit element, 50% offset


				enterView({
 selector: '.block-e',
 offset: 0.5,
 enter: function(el) {
  el.classList.add('entered');
 },
 exit: function(el) {
  el.classList.remove('entered');
 },
});

.block-e

Progress increments, 50% offset


				enterView({
 selector: '.block-f',
 offset: 0.5,
 enter: function(el) {
  el.classList.add('entered');
 },
 progress: function(el, progress) {
  var p = el.querySelector('.progress')
  p.innerText = progress.toFixed(2);
 }
});

.block-f