// ---------------------------------------------------------------------------------------------------- // ScrollMe // A jQuery plugin for adding simple scrolling effects to web pages // http://scrollme.nckprsn.com // ---------------------------------------------------------------------------------------------------- var scrollme = (function (a) { var d = {}; var c = a(document); var b = a(window); d.body_height = 0; d.viewport_height = 0; d.viewport_top = 0; d.viewport_bottom = 0; d.viewport_top_previous = -1; d.elements = []; d.elements_in_view = []; d.property_defaults = { opacity: 1, translatex: 0, translatey: 0, translatez: 0, rotatex: 0, rotatey: 0, rotatez: 0, scale: 1, scalex: 1, scaley: 1, scalez: 1, }; d.scrollme_selector = ".scrollme"; d.animateme_selector = ".animateme"; d.update_interval = 10; d.easing_functions = { linear: function (e) { return e; }, easeout: function (e) { return e * e * e; }, easein: function (e) { e = 1 - e; return 1 - e * e * e; }, easeinout: function (e) { if (e < 0.5) { return 4 * e * e * e; } else { e = 1 - e; return 1 - 4 * e * e * e; } }, }; d.init_events = ["ready", "page:load", "page:change"]; d.init_if = function () { return true; }; d.init = function () { if (!d.init_if()) { return false; } d.init_elements(); d.on_resize(); b.on("resize orientationchange", function () { d.on_resize(); }); b.load(function () { setTimeout(function () { d.on_resize(); }, 100); }); setInterval(d.update, d.update_interval); return true; }; d.init_elements = function () { a(d.scrollme_selector).each(function () { var e = {}; e.element = a(this); var f = []; a(this) .find(d.animateme_selector) .addBack(d.animateme_selector) .each(function () { var h = {}; h.element = a(this); h.when = h.element.data("when"); h.from = h.element.data("from"); h.to = h.element.data("to"); if (h.element.is("[data-crop]")) { h.crop = h.element.data("crop"); } else { h.crop = true; } if (h.element.is("[data-easing]")) { h.easing = d.easing_functions[h.element.data("easing")]; } else { h.easing = d.easing_functions.easeout; } var g = {}; if (h.element.is("[data-opacity]")) { g.opacity = h.element.data("opacity"); } if (h.element.is("[data-translatex]")) { g.translatex = h.element.data("translatex"); } if (h.element.is("[data-translatey]")) { g.translatey = h.element.data("translatey"); } if (h.element.is("[data-translatez]")) { g.translatez = h.element.data("translatez"); } if (h.element.is("[data-rotatex]")) { g.rotatex = h.element.data("rotatex"); } if (h.element.is("[data-rotatey]")) { g.rotatey = h.element.data("rotatey"); } if (h.element.is("[data-rotatez]")) { g.rotatez = h.element.data("rotatez"); } if (h.element.is("[data-scale]")) { g.scale = h.element.data("scale"); } if (h.element.is("[data-scalex]")) { g.scalex = h.element.data("scalex"); } if (h.element.is("[data-scaley]")) { g.scaley = h.element.data("scaley"); } if (h.element.is("[data-scalez]")) { g.scalez = h.element.data("scalez"); } h.properties = g; f.push(h); }); e.effects = f; d.elements.push(e); }); }; d.update = function () { window.requestAnimationFrame(function () { d.update_viewport_position(); if (d.viewport_top_previous != d.viewport_top) { d.update_elements_in_view(); d.animate(); } d.viewport_top_previous = d.viewport_top; }); }; d.animate = function () { var C = d.elements_in_view.length; for (var A = 0; A < C; A++) { var h = d.elements_in_view[A]; var f = h.effects.length; for (var D = 0; D < f; D++) { var w = h.effects[D]; switch (w.when) { case "view": case "span": var r = h.top - d.viewport_height; var n = h.bottom; break; case "exit": var r = h.bottom - d.viewport_height; var n = h.bottom; break; default: var r = h.top - d.viewport_height; var n = h.top; break; } if (w.crop) { if (r < 0) { r = 0; } if (n > d.body_height - d.viewport_height) { n = d.body_height - d.viewport_height; } } var g = (d.viewport_top - r) / (n - r); var x = w.from; var j = w.to; var o = j - x; var k = (g - x) / o; var v = w.easing(k); var l = d.animate_value(g, v, x, j, w, "opacity"); var t = d.animate_value(g, v, x, j, w, "translatey"); var u = d.animate_value(g, v, x, j, w, "translatex"); var s = d.animate_value(g, v, x, j, w, "translatez"); var B = d.animate_value(g, v, x, j, w, "rotatex"); var z = d.animate_value(g, v, x, j, w, "rotatey"); var y = d.animate_value(g, v, x, j, w, "rotatez"); var E = d.animate_value(g, v, x, j, w, "scale"); var q = d.animate_value(g, v, x, j, w, "scalex"); var p = d.animate_value(g, v, x, j, w, "scaley"); var m = d.animate_value(g, v, x, j, w, "scalez"); if ("scale" in w.properties) { q = E; p = E; m = E; } w.element.css({ opacity: l, transform: "translate3d( " + u + "px , " + t + "px , " + s + "px ) rotateX( " + B + "deg ) rotateY( " + z + "deg ) rotateZ( " + y + "deg ) scale3d( " + q + " , " + p + " , " + m + " )", }); } } }; d.animate_value = function (i, h, j, k, n, m) { var g = d.property_defaults[m]; if (!(m in n.properties)) { return g; } var e = n.properties[m]; var f = k > j ? true : false; if (i < j && f) { return g; } if (i > k && f) { return e; } if (i > j && !f) { return g; } if (i < k && !f) { return e; } var l = g + h * (e - g); switch (m) { case "opacity": l = l.toFixed(2); break; case "translatex": l = l.toFixed(0); break; case "translatey": l = l.toFixed(0); break; case "translatez": l = l.toFixed(0); break; case "rotatex": l = l.toFixed(1); break; case "rotatey": l = l.toFixed(1); break; case "rotatez": l = l.toFixed(1); break; case "scale": l = l.toFixed(3); break; default: break; } return l; }; d.update_viewport_position = function () { d.viewport_top = b.scrollTop(); d.viewport_bottom = d.viewport_top + d.viewport_height; }; d.update_elements_in_view = function () { d.elements_in_view = []; var f = d.elements.length; for (var e = 0; e < f; e++) { if ( d.elements[e].top < d.viewport_bottom && d.elements[e].bottom > d.viewport_top ) { d.elements_in_view.push(d.elements[e]); } } }; d.on_resize = function () { d.update_viewport(); d.update_element_heights(); d.update_viewport_position(); d.update_elements_in_view(); d.animate(); }; d.update_viewport = function () { d.body_height = c.height(); d.viewport_height = b.height(); }; d.update_element_heights = function () { var g = d.elements.length; for (var f = 0; f < g; f++) { var h = d.elements[f].element.outerHeight(); var e = d.elements[f].element.offset(); d.elements[f].height = h; d.elements[f].top = e.top; d.elements[f].bottom = e.top + h; } }; c.on(d.init_events.join(" "), function () { d.init(); }); return d; })(jQuery);