Skip to content

russellsamora/enter-view

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published