|
1
|
/*! UIkit 2.27.5 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
|
2
|
(function(addon) {
|
|
3
|
|
|
4
|
var component;
|
|
5
|
|
|
6
|
if (window.UIkit2) {
|
|
7
|
component = addon(UIkit2);
|
|
8
|
}
|
|
9
|
|
|
10
|
if (typeof define == 'function' && define.amd) {
|
|
11
|
define('uikit-grid-parallax', ['uikit'], function(){
|
|
12
|
return component || addon(UIkit2);
|
|
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 = UI.$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
|
});
|