diff options
Diffstat (limited to 'js/components/grid-parallax.js')
-rwxr-xr-x | js/components/grid-parallax.js | 168 |
1 files changed, 168 insertions, 0 deletions
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 @@ | |||
1 | /*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ | ||
2 | (function(addon) { | ||
3 | |||
4 | var component; | ||
5 | |||
6 | if (window.UIkit) { | ||
7 | component = addon(UIkit); | ||
8 | } | ||
9 | |||
10 | if (typeof define == "function" && define.amd) { | ||
11 | define("uikit-grid-parallax", ["uikit"], function(){ | ||
12 | return component || addon(UIkit); | ||
13 | }); | ||
14 | } | ||
15 | |||
16 | })(function(UI){ | ||
17 | |||
18 | var parallaxes = [], checkParallaxes = function() { | ||
19 | |||
20 | requestAnimationFrame(function(){ | ||
21 | for (var i=0; i < parallaxes.length; i++) { | ||
22 | parallaxes[i].process(); | ||
23 | } | ||
24 | }); | ||
25 | }; | ||
26 | |||
27 | |||
28 | UI.component('gridparallax', { | ||
29 | |||
30 | defaults: { | ||
31 | target : false, | ||
32 | smooth : 150, | ||
33 | translate : 150 | ||
34 | }, | ||
35 | |||
36 | boot: function() { | ||
37 | |||
38 | // listen to scroll and resize | ||
39 | UI.$doc.on("scrolling.uk.document", checkParallaxes); | ||
40 | UI.$win.on("load resize orientationchange", UI.Utils.debounce(function(){ | ||
41 | checkParallaxes(); | ||
42 | }, 50)); | ||
43 | |||
44 | // init code | ||
45 | UI.ready(function(context) { | ||
46 | |||
47 | UI.$('[data-uk-grid-parallax]', context).each(function() { | ||
48 | |||
49 | var parallax = UI.$(this); | ||
50 | |||
51 | if (!parallax.data("gridparallax")) { | ||
52 | UI.gridparallax(parallax, UI.Utils.options(parallax.attr("data-uk-grid-parallax"))); | ||
53 | } | ||
54 | }); | ||
55 | }); | ||
56 | }, | ||
57 | |||
58 | init: function() { | ||
59 | |||
60 | var $this = this; | ||
61 | |||
62 | this.initItems().process(); | ||
63 | parallaxes.push(this); | ||
64 | |||
65 | UI.$win.on('load resize orientationchange', (function() { | ||
66 | |||
67 | var fn = function() { | ||
68 | var columns = getcolumns($this.element); | ||
69 | |||
70 | $this.element.css('margin-bottom', ''); | ||
71 | |||
72 | if (columns > 1) { | ||
73 | $this.element.css('margin-bottom', $this.options.translate + parseInt($this.element.css('margin-bottom'))); | ||
74 | } | ||
75 | }; | ||
76 | |||
77 | UI.$(function() { fn(); }); | ||
78 | |||
79 | return UI.Utils.debounce(fn, 50); | ||
80 | })()); | ||
81 | }, | ||
82 | |||
83 | initItems: function() { | ||
84 | |||
85 | var smooth = this.options.smooth; | ||
86 | |||
87 | this.items = (this.options.target ? this.element.find(this.options.target) : this.element.children()).each(function(){ | ||
88 | UI.$(this).css({ | ||
89 | transition: 'transform '+smooth+'ms linear', | ||
90 | transform: '' | ||
91 | }); | ||
92 | }); | ||
93 | |||
94 | return this; | ||
95 | }, | ||
96 | |||
97 | process: function() { | ||
98 | |||
99 | var percent = percentageInViewport(this.element), | ||
100 | columns = getcolumns(this.element), | ||
101 | items = this.items, | ||
102 | mods = [(columns-1)]; | ||
103 | |||
104 | if (columns == 1 || !percent) { | ||
105 | items.css('transform', ''); | ||
106 | return; | ||
107 | } | ||
108 | |||
109 | while(mods.length < columns) { | ||
110 | if(!(mods[mods.length-1] - 2)) break; | ||
111 | mods.push(mods[mods.length-1] - 2); | ||
112 | } | ||
113 | |||
114 | var translate = this.options.translate, percenttranslate = percent * translate; | ||
115 | |||
116 | items.each(function(idx, ele, translate){ | ||
117 | translate = mods.indexOf((idx+1) % columns) != -1 ? percenttranslate : percenttranslate / 8; | ||
118 | UI.$(this).css('transform', 'translate3d(0,'+(translate)+'px, 0)'); | ||
119 | }); | ||
120 | } | ||
121 | |||
122 | }); | ||
123 | |||
124 | |||
125 | function getcolumns(element) { | ||
126 | |||
127 | var children = element.children(), | ||
128 | first = children.filter(':visible:first'), | ||
129 | top = first[0].offsetTop + first.outerHeight(); | ||
130 | |||
131 | for (var column=0;column<children.length;column++) { | ||
132 | if (children[column].offsetTop >= top) break; | ||
133 | } | ||
134 | |||
135 | return column || 1; | ||
136 | } | ||
137 | |||
138 | function percentageInViewport(element) { | ||
139 | |||
140 | var top = element.offset().top, | ||
141 | height = element.outerHeight(), | ||
142 | scrolltop = UIkit.$win.scrollTop(), | ||
143 | wh = window.innerHeight, | ||
144 | distance, percentage, percent; | ||
145 | |||
146 | if (top > (scrolltop + wh)) { | ||
147 | percent = 0; | ||
148 | } else if ((top + height) < scrolltop) { | ||
149 | percent = 1; | ||
150 | } else { | ||
151 | |||
152 | if ((top + height) < wh) { | ||
153 | percent = (scrolltop < wh ? scrolltop : scrolltop - wh) / (top+height); | ||
154 | } else { | ||
155 | |||
156 | distance = (scrolltop + wh) - top; | ||
157 | percentage = Math.round(distance / ((wh + height) / 100)); | ||
158 | percent = percentage/100; | ||
159 | } | ||
160 | |||
161 | if (top < wh) { | ||
162 | percent = percent * scrolltop / ((top + height) - wh); | ||
163 | } | ||
164 | } | ||
165 | |||
166 | return percent > 1 ? 1:percent; | ||
167 | } | ||
168 | }); \ No newline at end of file | ||