Preview: anim.js
Size: 11.93 KB
//home/justbyquicklly-old/public_html/js/anim.js
window.scrollReveal = (function (window) {
'use strict';
function scrollReveal(options) {
this.docElem = window.document.documentElement;
this.options = this.extend(this.defaults, options);
this.self = this;
if (this.options.init == true) this.init();
}
scrollReveal.prototype = {
defaults: {
after: '0s',
enter: 'bottom',
move: '24px',
over: '0.66s',
easing: 'ease-in-out',
// if 0, the element is considered in the viewport as soon as it enters
// if 1, the element is considered in the viewport when it's fully visible
viewportFactor: 0.33,
// if false, animations occur only once
// if true, animations occur each time an element enters the viewport
reset: false,
// if true, scrollReveal.init() is automaticaly called upon instantiation
init: true
},
/*=============================================================================*/
init: function () {
this.scrolled = false;
var self = this;
this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scrollReveal]'));
this.elems.forEach(function (el, i) {
self.update(el);
});
var scrollHandler = function () {
if (!self.scrolled) {
self.scrolled = true;
setTimeout(function () {
self._scrollPage();
}, 60);
}
};
var resizeHandler = function () {
if (self.resizeTimeout) {
clearTimeout(self.resizeTimeout);
}
function delayed() {
self._scrollPage();
self.resizeTimeout = null;
}
self.resizeTimeout = setTimeout(delayed, 200);
};
window.addEventListener('scroll', scrollHandler, false);
window.addEventListener('resize', resizeHandler, false);
},
_scrollPage: function () {
var self = this;
this.elems.forEach(function (el, i) {
self.update(el);
});
this.scrolled = false;
},
parseLanguage: function (el) {
var words = el.getAttribute('data-scrollreveal').split(/[, ]+/),
parsed = {};
function filter (words) {
var ret = [],
blacklist = [
"from",
"the",
"and",
"then",
"but",
"with"
];
words.forEach(function (word, i) {
if (blacklist.indexOf(word) > -1) {
return;
}
ret.push(word);
});
return ret;
}
words = filter(words);
words.forEach(function (word, i) {
switch (word) {
case "enter":
parsed.enter = words[i + 1];
return;
case "after":
parsed.after = words[i + 1];
return;
case "wait":
parsed.after = words[i + 1];
return;
case "move":
parsed.move = words[i + 1];
return;
case "ease":
parsed.move = words[i + 1];
parsed.ease = "ease";
return;
case "ease-in":
parsed.move = words[i + 1];
parsed.easing = "ease-in";
return;
case "ease-in-out":
parsed.move = words[i + 1];
parsed.easing = "ease-in-out";
return;
case "ease-out":
parsed.move = words[i + 1];
parsed.easing = "ease-out";
return;
case "over":
parsed.over = words[i + 1];
return;
default:
return;
}
});
return parsed;
},
/*=============================================================================*/
update: function (el) {
var css = this.genCSS(el);
if (!el.getAttribute('data-scrollReveal-initialized')) {
el.setAttribute('style', css.initial);
el.setAttribute('data-scrollReveal-initialized', true);
}
if (!this.isElementInViewport(el, this.options.viewportFactor)) {
if (this.options.reset) {
el.setAttribute('style', css.initial + css.reset);
}
return;
}
if (el.getAttribute('data-scrollReveal-complete')) return;
if (this.isElementInViewport(el, this.options.viewportFactor)) {
el.setAttribute('style', css.target + css.transition);
if (!this.options.reset) {
setTimeout(function () {
el.removeAttribute('style');
el.setAttribute('data-scrollReveal-complete',true);
}, css.totalDuration);
}
return;
}
},
/*=============================================================================*/
genCSS: function (el) {
var parsed = this.parseLanguage(el),
enter,
axis;
if (parsed.enter) {
if (parsed.enter == "top" || parsed.enter == "bottom") {
enter = parsed.enter;
axis = "y";
}
if (parsed.enter == "left" || parsed.enter == "right") {
enter = parsed.enter;
axis = "x";
}
} else {
if (this.options.enter == "top" || this.options.enter == "bottom") {
enter = this.options.enter
axis = "y";
}
if (this.options.enter == "left" || this.options.enter == "right") {
enter = this.options.enter
axis = "x";
}
}
if (enter == "top" || enter == "left") {
if (!typeof parsed.move == "undefined") {
parsed.move = "-" + parsed.move;
}
else {
parsed.move = "-" + this.options.move;
}
}
var dist = parsed.move || this.options.move,
dur = parsed.over || this.options.over,
delay = parsed.after || this.options.after,
easing = parsed.easing || this.options.easing;
var transition = "-webkit-transition: all " + dur + " " + easing + " " + delay + ";" +
"-moz-transition: all " + dur + " " + easing + " " + delay + ";" +
"-o-transition: all " + dur + " " + easing + " " + delay + ";" +
"transition: all " + dur + " " + easing + " " + delay + ";" +
"-webkit-perspective: 1000;" +
"-webkit-backface-visibility: hidden;";
// The same as transition, but removing the delay for elements fading out.
var reset = "-webkit-transition: all " + dur + " " + easing + " 0s;" +
"-moz-transition: all " + dur + " " + easing + " 0s;" +
"-o-transition: all " + dur + " " + easing + " 0s;" +
"transition: all " + dur + " " + easing + " 0s;" +
"-webkit-perspective: 1000;" +
"-webkit-backface-visibility: hidden;";
var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" +
"-moz-transform: translate" + axis + "(" + dist + ");" +
"transform: translate" + axis + "(" + dist + ");" +
"opacity: 0;";
var target = "-webkit-transform: translate" + axis + "(0);" +
"-moz-transform: translate" + axis + "(0);" +
"transform: translate" + axis + "(0);" +
"opacity: 1;";
return {
transition: transition,
initial: initial,
target: target,
reset: reset,
totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000)
};
},
getViewportH : function () {
var client = this.docElem['clientHeight'],
inner = window['innerHeight'];
return (client < inner) ? inner : client;
},
getOffset : function(el) {
var offsetTop = 0,
offsetLeft = 0;
do {
if (!isNaN(el.offsetTop)) {
offsetTop += el.offsetTop;
}
if (!isNaN(el.offsetLeft)) {
offsetLeft += el.offsetLeft;
}
} while (el = el.offsetParent)
return {
top: offsetTop,
left: offsetLeft
}
},
isElementInViewport : function(el, h) {
var scrolled = window.pageYOffset,
viewed = scrolled + this.getViewportH(),
elH = el.offsetHeight,
elTop = this.getOffset(el).top,
elBottom = elTop + elH,
h = h || 0;
return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
},
extend: function (a, b){
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
}; // end scrollReveal.prototype
return scrollReveal;
})(window);
(function($) {
'use strict';
window.scrollReveal = new scrollReveal({reset: true});
// See: http://stackoverflow.com/a/11381730/989439
var isMobile = (function () {
var check = false;
(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
})();
var transitionEnd = (function () {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
})();
console.log("Is the current device mobile? " + isMobile + "\n"
+ "CSS transitions end-event name: " + transitionEnd);
})();
Directory Contents
Dirs: 1 × Files: 76