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++;
		 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

.block-d

.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