Skip to content
master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Apr 19, 2018
Apr 19, 2018
Dec 11, 2015
Apr 19, 2019
fix
Dec 17, 2020
Dec 15, 2020

README.md

enter-view

Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank. Less than 1kb minified + gzipped.

Installation

Old school (exposes the enterView global):

<script src="https://unpkg.com/enter-view"></script>

New school:

npm install enter-view --save

And then import/require it:

import enterView from 'enter-view'; // or...
const enterView = require('enterView');

Usage

enterView({
	selector: '.class-name',
	enter: function(el) {
		el.classList.add('entered');
	}
});
enterView({
	selector: '.class-name',
	enter: function(el) {
		el.classList.add('entered');
	},
	exit: function(el) {
		el.classList.remove('entered');
	},
	progress: function(el, progress) {
		el.style.opacity = progress;
	},
	offset: 0.5, // enter at middle of viewport
	once: true, // trigger just once
});

Options

selector: [string or array of elements] required

Takes a class, id, or array of dom elements.

enter: [function] optional

Callback function that returns the element that was entered.

exit: [function] optional

Callback function that returns the element that was exited.

progress: [function] optional

Callback function that returns the element that was progressed through, and a value between 0 and 1 of how far through the element progress has been made.

offset: [number] optional (defaults to 0)

A value from 0 to 1 of how far from the bottom of the viewport to offset the trigger by. 0 = top of element crosses bottom of viewport (enters screen from bottom), 1 = top of element crosses top of viewport (exits screen top).

once: [boolean] optional (defaults to false)

Whether or not to trigger the callback just once.

Contributors

About

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

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.