Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Watches a set of elements and reveals them as they scroll into view.
/*
Name: Reveal
Desc: Watches a set of elements and reveals them as they scroll into view. Add a class to all of the elements you want hidden, for example 'reveal-hidden' and apply some css to make the transition nice. Once the element comes into view, a 'reveal-show' class will be applied.
Usage:
import Reveal from './reveal';
Reveal.init({
elements : '.reveal-hidden'
});
Example CSS
.reveal-show{
transition: all .5s ease;
}
.reveal-hidden{
opacity:0;
transform: translate3d(0,100%,0);
}
*/
var _module;
export default _module = {
inc: 0,
nextel: null,
init: function(args) {
_module.elements = document.querySelectorAll(args.elements);
_module.nextel = _module.nextByOrder();
window.addEventListener('scroll', _module.onScroll);
_module.onLoad();
},
onScroll: function (e) {
if (!_module.nextel) {
window.removeEventListener('scroll', _module.onScroll);
return
}
var eh = _module.nextel.clientHeight / 2;
var inview = (_module.nextel.getBoundingClientRect().top - window.innerHeight - eh) < 0;
if (!inview) return;
_module.showElement();
},
onLoad: function () {
var eh = _module.nextel.clientHeight / 2;
var inview = (_module.nextel.getBoundingClientRect().top - window.innerHeight - eh) < 0;
if (inview) {
_module.showElement();
if (_module.nextel) {
_module.onLoad();
}
}
},
showElement: function () {
var showel = _module.nextel;
if (showel.getAttribute('data-reveal-video')) {
_module.videoAction(showel);
}
setTimeout(() => {
showel.classList.remove('reveal-hidden');
showel.classList.add('reveal-show');
}, 50);
_module.inc += 1;
_module.nextel = _module.nextByOrder();
},
nextByOrder: function () {
var o;
for (var k = 0; k < _module.elements.length; k++) {
o = parseInt(_module.elements[k].getAttribute('data-reveal-order'));
if (o === _module.inc) {
return _module.elements[k];
}
}
}
};
@invisibled
Owner

in the init and showElement functions, setting _module.nextel needs to equal _module.nextByOrder() || _module.elements[_module.inc]; to account for it someone isn't using the order attribute

@invisibled
Owner

If no elements but init is still called, fail gracefully

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment