Author: | russellsamora |
---|---|
Views Total: | 179 views |
Official Page: | Go to website |
Last Update: | October 14, 2022 |
License: | MIT |
Preview:

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.1 (10/14/2022)
- Bugfix
v2.0.0 (02/08/2019)
- progress 0 and 1
v1.0.0 (06/26/2018)
- Added exit view