From c94fb32c7a3c28b18a27460aa2447eeec1fac1de Mon Sep 17 00:00:00 2001 From: Pascal Szewczyk Date: Mon, 18 Jul 2016 23:23:54 +0200 Subject: uikit added --- js/components/grid-parallax.js | 168 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100755 js/components/grid-parallax.js (limited to 'js/components/grid-parallax.js') diff --git a/js/components/grid-parallax.js b/js/components/grid-parallax.js new file mode 100755 index 0000000..45b7a9e --- /dev/null +++ b/js/components/grid-parallax.js @@ -0,0 +1,168 @@ +/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +(function(addon) { + + var component; + + if (window.UIkit) { + component = addon(UIkit); + } + + if (typeof define == "function" && define.amd) { + define("uikit-grid-parallax", ["uikit"], function(){ + return component || addon(UIkit); + }); + } + +})(function(UI){ + + var parallaxes = [], checkParallaxes = function() { + + requestAnimationFrame(function(){ + for (var i=0; i < parallaxes.length; i++) { + parallaxes[i].process(); + } + }); + }; + + + UI.component('gridparallax', { + + defaults: { + target : false, + smooth : 150, + translate : 150 + }, + + boot: function() { + + // listen to scroll and resize + UI.$doc.on("scrolling.uk.document", checkParallaxes); + UI.$win.on("load resize orientationchange", UI.Utils.debounce(function(){ + checkParallaxes(); + }, 50)); + + // init code + UI.ready(function(context) { + + UI.$('[data-uk-grid-parallax]', context).each(function() { + + var parallax = UI.$(this); + + if (!parallax.data("gridparallax")) { + UI.gridparallax(parallax, UI.Utils.options(parallax.attr("data-uk-grid-parallax"))); + } + }); + }); + }, + + init: function() { + + var $this = this; + + this.initItems().process(); + parallaxes.push(this); + + UI.$win.on('load resize orientationchange', (function() { + + var fn = function() { + var columns = getcolumns($this.element); + + $this.element.css('margin-bottom', ''); + + if (columns > 1) { + $this.element.css('margin-bottom', $this.options.translate + parseInt($this.element.css('margin-bottom'))); + } + }; + + UI.$(function() { fn(); }); + + return UI.Utils.debounce(fn, 50); + })()); + }, + + initItems: function() { + + var smooth = this.options.smooth; + + this.items = (this.options.target ? this.element.find(this.options.target) : this.element.children()).each(function(){ + UI.$(this).css({ + transition: 'transform '+smooth+'ms linear', + transform: '' + }); + }); + + return this; + }, + + process: function() { + + var percent = percentageInViewport(this.element), + columns = getcolumns(this.element), + items = this.items, + mods = [(columns-1)]; + + if (columns == 1 || !percent) { + items.css('transform', ''); + return; + } + + while(mods.length < columns) { + if(!(mods[mods.length-1] - 2)) break; + mods.push(mods[mods.length-1] - 2); + } + + var translate = this.options.translate, percenttranslate = percent * translate; + + items.each(function(idx, ele, translate){ + translate = mods.indexOf((idx+1) % columns) != -1 ? percenttranslate : percenttranslate / 8; + UI.$(this).css('transform', 'translate3d(0,'+(translate)+'px, 0)'); + }); + } + + }); + + + function getcolumns(element) { + + var children = element.children(), + first = children.filter(':visible:first'), + top = first[0].offsetTop + first.outerHeight(); + + for (var column=0;column= top) break; + } + + return column || 1; + } + + function percentageInViewport(element) { + + var top = element.offset().top, + height = element.outerHeight(), + scrolltop = UIkit.$win.scrollTop(), + wh = window.innerHeight, + distance, percentage, percent; + + if (top > (scrolltop + wh)) { + percent = 0; + } else if ((top + height) < scrolltop) { + percent = 1; + } else { + + if ((top + height) < wh) { + percent = (scrolltop < wh ? scrolltop : scrolltop - wh) / (top+height); + } else { + + distance = (scrolltop + wh) - top; + percentage = Math.round(distance / ((wh + height) / 100)); + percent = percentage/100; + } + + if (top < wh) { + percent = percent * scrolltop / ((top + height) - wh); + } + } + + return percent > 1 ? 1:percent; + } +}); \ No newline at end of file -- cgit v1.2.3