/*! * jquery smoove v0.2.9 (http://smoove.js.org/) * copyright (c) 2016 adam bouqdib * licensed under gpl-2.0 (http://abemedia.co.uk/license) */ (function ($, window, document) { // function for adding vendor prefixes function crossbrowser(property, value, prefix) { function ucase(string) { return string.charat(0).touppercase() + string.slice(1); } var vendor = ['webkit', 'moz', 'ms', 'o'], properties = {}; for (var i = 0; i < vendor.length; i++) { if (prefix) { value = value.replace(prefix, '-' + vendor[i] + '-' + prefix); } properties[ucase(vendor[i]) + ucase(property)] = value; } properties[property] = value; return properties; } function smooveit(direction) { for (var i = 0; i < $.fn.smoove.items.length; i++) { var $item = $.fn.smoove.items[i], params = $item.params, height = $(window).height(), // if direction isn't set, set offset to 0 to avoid hiding objects that are above the fold offset = (!direction || direction === 'down' && $item.css('opacity') === '1') ? 0 : params.offset, itemtop = $(window).scrolltop() + height - $item.data('top'); // offset in % if (typeof offset === 'string' && offset.indexof('%')) { offset = parseint(offset) / 100 * height; } if (itemtop < offset) { if (params.opacity !== false) { $item.css({ opacity: params.opacity }); } var transforms = [], properties = ['move', 'move3d', 'movex', 'movey', 'movez', 'rotate', 'rotate3d', 'rotatex', 'rotatey', 'rotatez', 'scale', 'scale3d', 'scalex', 'scaley', 'skew', 'skewx', 'skewy']; for (var p = 0; p < properties.length; p++) { if (typeof params[properties[p]] !== "undefined") { transforms[properties[p]] = params[properties[p]]; } } var transform = ''; for (var t in transforms) { transform += t.replace('move', 'translate') + '(' + transforms[t] + ') '; } if (transform) { $item.css(crossbrowser('transform', transform)); $item.parent().css(crossbrowser('perspective', params.perspective)); //$item.parent().css(crossbrowser('transformstyle', params.transformstyle)); if (params.transformorigin) { $item.css(crossbrowser('transformorigin', params.transformorigin)); } } } else { $item.css('opacity', 1).css(crossbrowser('transform', '')); } } } $.fn.smoove = function (options) { $.fn.smoove.init(this, $.extend({}, $.fn.smoove.defaults, options)); return this; }; $.fn.smoove.items = []; $.fn.smoove.loaded = false; $.fn.smoove.defaults = { offset: 150, opacity: 0, transition: "all 1s ease, opacity 1.5s ease", transformstyle: 'preserve-3d', transformorigin: false, perspective: 1000 }; $.fn.smoove.init = function (items, settings) { items.each(function () { var $item = $(this), params = $item.params = $.extend({}, settings, $item.data()); $item.params.opacity = $item.params.opacity / 100; $item.data('top', $item.offset().top); params.transition = crossbrowser('transition', params.transition, 'transform'); $item.css(params.transition); $.fn.smoove.items.push($item); }); // add event handlers if (!$.fn.smoove.loaded) { $.fn.smoove.loaded = true; var didscroll = false, oldscroll = 0, oldheight = $(window).height(), oldwidth = $(window).width(), olddocheight = $(document).height(), resizing; // naughty way of avoiding vertical scrollbars when items slide in/out from the side if ($('body').width() === $(window).width()) { $('body').css('overflow-x', 'hidden'); } $(window).resize(function () { cleartimeout(resizing); resizing = settimeout(function () { var height = $(window).height(), width = $(window).width(), direction = (oldheight > height) ? direction = 'up' : 'down', items = $.fn.smoove.items; oldheight = height; // responsive support - reassign position values on resize if (oldwidth !== width) { for (var i = 0; i < items.length; i++) { items[i].css(crossbrowser('transform', '')).css(crossbrowser('transition', '')); } // wait for responsive magic to finish var stillresizing = setinterval(function () { var docheight = $(document).height(); if (docheight === olddocheight) { window.clearinterval(stillresizing); for (var i = 0; i < items.length; i++) { items[i].data('top', items[i].offset().top); items[i].css(items[i].params.transition); } smooveit(direction); } olddocheight = docheight; }, 500); } else { smooveit(direction); } oldwidth = width; }, 500); }); $(window).on('load', function () { smooveit(); // throttle scroll handler $(window).scroll(function () { didscroll = true; }); setinterval(function () { if (didscroll) { didscroll = false; var scrolltop = $(window).scrolltop(), direction = (scrolltop < oldscroll) ? direction = 'up' : 'down'; oldscroll = scrolltop; smooveit(direction); } }, 250); }); } }; }(jquery, window, document));