Cross-platform Viewport Checker With Pure JavaScript – emergence.js

Author
In Articles, Web Design Nov 7, 2017
Cross-platform Viewport Checker With Pure JavaScript – emergence.js

Emergence.js is a cross-platform, high-performance viewport checker library which detects if HTML components are within the viewport, and performs customized actions when the weather are seen and/or hidden.

Set up:

# NPM $ npm set up emergence.js --save # Bower $ bower set up emergence.js --save

Learn how to use it:

Insert the minified model of the emergence.js into the net web page.

<script src="https://www.cssscript.com/dist/js/emergence.min.js"></script>

Initialize the emergence.js and also you’re able to go.

emergence.init();

Add the data-emergence="hidden" attribute to any factor you wish to look ahead to the scroll place.

<div class="myElement" data-emergence="hidden"></div>

Apply customized CSS types (e.g. CSS3 based mostly animations) to the factor when it turns into seen or invisible as you scroll the net web page.

.myElement[data-emergence=hidden] .myElement[data-emergence=visible]

Or carry out customized actions when the factor turns into seen or invisible as you scroll the net web page.

emergence.init();

Attainable choices to customise the emergence.js library.

emergence.init();

API strategies.

// Refire visibility checks exterior of the load, scroll and resize occasions already baked into the plugin emergence.interact(); // Disable Emergence emergence.disengage();

 

Leave a Reply

Your email address will not be published. Required fields are marked *