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];
}
}
}
};
Owner

invisibled commented Jan 3, 2017

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

Owner

invisibled commented Jan 3, 2017

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