summaryrefslogtreecommitdiff
path: root/js/components/parallax.js
diff options
context:
space:
mode:
authorerdgeist <erdgeist@bauklotz.fritz.box>2016-08-07 02:17:47 +0200
committererdgeist <erdgeist@bauklotz.fritz.box>2016-08-07 02:17:47 +0200
commit2653f6a943a6ed74e2b72246ba8211c5fb699a7f (patch)
tree1583823bf875456212156452ba464933139c3ceb /js/components/parallax.js
parentd850c105940f414caf44705191af8c8b19ca9c85 (diff)
restructured ;)
Diffstat (limited to 'js/components/parallax.js')
-rwxr-xr-xjs/components/parallax.js462
1 files changed, 0 insertions, 462 deletions
diff --git a/js/components/parallax.js b/js/components/parallax.js
deleted file mode 100755
index e706abb..0000000
--- a/js/components/parallax.js
+++ /dev/null
@@ -1,462 +0,0 @@
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-parallax", ["uikit"], function(){
12 return component || addon(UIkit);
13 });
14 }
15
16})(function(UI){
17
18 "use strict";
19
20 var parallaxes = [],
21 supports3d = false,
22 scrolltop = 0,
23 wh = window.innerHeight,
24 checkParallaxes = function() {
25
26 scrolltop = UI.$win.scrollTop();
27
28 window.requestAnimationFrame(function(){
29 for (var i=0; i < parallaxes.length; i++) {
30 parallaxes[i].process();
31 }
32 });
33 };
34
35
36 UI.component('parallax', {
37
38 defaults: {
39 velocity : 0.5,
40 target : false,
41 viewport : false,
42 media : false
43 },
44
45 boot: function() {
46
47 supports3d = (function(){
48
49 var el = document.createElement('div'),
50 has3d,
51 transforms = {
52 'WebkitTransform':'-webkit-transform',
53 'MSTransform':'-ms-transform',
54 'MozTransform':'-moz-transform',
55 'Transform':'transform'
56 };
57
58 // Add it to the body to get the computed style.
59 document.body.insertBefore(el, null);
60
61 for (var t in transforms) {
62 if (el.style[t] !== undefined) {
63 el.style[t] = "translate3d(1px,1px,1px)";
64 has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
65 }
66 }
67
68 document.body.removeChild(el);
69
70 return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
71 })();
72
73 // listen to scroll and resize
74 UI.$doc.on("scrolling.uk.document", checkParallaxes);
75 UI.$win.on("load resize orientationchange", UI.Utils.debounce(function(){
76 wh = window.innerHeight;
77 checkParallaxes();
78 }, 50));
79
80 // init code
81 UI.ready(function(context) {
82
83 UI.$('[data-uk-parallax]', context).each(function() {
84
85 var parallax = UI.$(this);
86
87 if (!parallax.data("parallax")) {
88 UI.parallax(parallax, UI.Utils.options(parallax.attr("data-uk-parallax")));
89 }
90 });
91 });
92 },
93
94 init: function() {
95
96 this.base = this.options.target ? UI.$(this.options.target) : this.element;
97 this.props = {};
98 this.velocity = (this.options.velocity || 1);
99
100 var reserved = ['target','velocity','viewport','plugins','media'];
101
102 Object.keys(this.options).forEach(function(prop){
103
104 if (reserved.indexOf(prop) !== -1) {
105 return;
106 }
107
108 var start, end, dir, diff, startend = String(this.options[prop]).split(',');
109
110 if (prop.match(/color/i)) {
111 start = startend[1] ? startend[0] : this._getStartValue(prop),
112 end = startend[1] ? startend[1] : startend[0];
113
114 if (!start) {
115 start = 'rgba(255,255,255,0)';
116 }
117
118 } else {
119 start = parseFloat(startend[1] ? startend[0] : this._getStartValue(prop)),
120 end = parseFloat(startend[1] ? startend[1] : startend[0]);
121 diff = (start < end ? (end-start):(start-end));
122 dir = (start < end ? 1:-1);
123 }
124
125 this.props[prop] = { 'start': start, 'end': end, 'dir': dir, 'diff': diff };
126
127 }.bind(this));
128
129 parallaxes.push(this);
130 },
131
132 process: function() {
133
134 if (this.options.media) {
135
136 switch(typeof(this.options.media)) {
137 case 'number':
138 if (window.innerWidth < this.options.media) {
139 return false;
140 }
141 break;
142 case 'string':
143 if (window.matchMedia && !window.matchMedia(this.options.media).matches) {
144 return false;
145 }
146 break;
147 }
148 }
149
150 var percent = this.percentageInViewport();
151
152 if (this.options.viewport !== false) {
153 percent = (this.options.viewport === 0) ? 1 : percent / this.options.viewport;
154 }
155
156 this.update(percent);
157 },
158
159 percentageInViewport: function() {
160
161 var top = this.base.offset().top,
162 height = this.base.outerHeight(),
163 distance, percentage, percent;
164
165 if (top > (scrolltop + wh)) {
166 percent = 0;
167 } else if ((top + height) < scrolltop) {
168 percent = 1;
169 } else {
170
171 if ((top + height) < wh) {
172
173 percent = (scrolltop < wh ? scrolltop : scrolltop - wh) / (top+height);
174
175 } else {
176
177 distance = (scrolltop + wh) - top;
178 percentage = Math.round(distance / ((wh + height) / 100));
179 percent = percentage/100;
180 }
181 }
182
183 return percent;
184 },
185
186 update: function(percent) {
187
188 var $this = this,
189 css = {transform:'', filter:''},
190 compercent = percent * (1 - (this.velocity - (this.velocity * percent))),
191 opts, val;
192
193 if (compercent < 0) compercent = 0;
194 if (compercent > 1) compercent = 1;
195
196 if (this._percent !== undefined && this._percent == compercent) {
197 return;
198 }
199
200 Object.keys(this.props).forEach(function(prop) {
201
202 opts = this.props[prop];
203
204 if (percent === 0) {
205 val = opts.start;
206 } else if(percent === 1) {
207 val = opts.end;
208 } else if(opts.diff !== undefined) {
209 val = opts.start + (opts.diff * compercent * opts.dir);
210 }
211
212 if ((prop == 'bg' || prop == 'bgp') && !this._bgcover) {
213 this._bgcover = initBgImageParallax(this, prop, opts);
214 }
215
216 switch(prop) {
217
218 // transforms
219 case 'x':
220 css.transform += supports3d ? ' translate3d('+val+'px, 0, 0)':' translateX('+val+'px)';
221 break;
222 case 'xp':
223 css.transform += supports3d ? ' translate3d('+val+'%, 0, 0)':' translateX('+val+'%)';
224 break;
225 case 'y':
226 css.transform += supports3d ? ' translate3d(0, '+val+'px, 0)':' translateY('+val+'px)';
227 break;
228 case 'yp':
229 css.transform += supports3d ? ' translate3d(0, '+val+'%, 0)':' translateY('+val+'%)';
230 break;
231 case 'rotate':
232 css.transform += ' rotate('+val+'deg)';
233 break;
234 case 'scale':
235 css.transform += ' scale('+val+')';
236 break;
237
238 // bg image
239 case 'bg':
240
241 // don't move if image height is too small
242 // if ($this.element.data('bgsize') && ($this.element.data('bgsize').h + val - window.innerHeight) < 0) {
243 // break;
244 // }
245
246 css['background-position'] = '50% '+val+'px';
247 break;
248 case 'bgp':
249 css['background-position'] = '50% '+val+'%';
250 break;
251
252 // color
253 case 'color':
254 case 'background-color':
255 case 'border-color':
256 css[prop] = calcColor(opts.start, opts.end, compercent);
257 break;
258
259 // CSS Filter
260 case 'blur':
261 css.filter += ' blur('+val+'px)';
262 break;
263 case 'hue':
264 css.filter += ' hue-rotate('+val+'deg)';
265 break;
266 case 'grayscale':
267 css.filter += ' grayscale('+val+'%)';
268 break;
269 case 'invert':
270 css.filter += ' invert('+val+'%)';
271 break;
272 case 'fopacity':
273 css.filter += ' opacity('+val+'%)';
274 break;
275 case 'saturate':
276 css.filter += ' saturate('+val+'%)';
277 break;
278 case 'sepia':
279 css.filter += ' sepia('+val+'%)';
280 break;
281
282 default:
283 css[prop] = val;
284 break;
285 }
286
287 }.bind(this));
288
289 if (css.filter) {
290 css['-webkit-filter'] = css.filter;
291 }
292
293 this.element.css(css);
294
295 this._percent = compercent;
296 },
297
298 _getStartValue: function(prop) {
299
300 var value = 0;
301
302 switch(prop) {
303 case 'scale':
304 value = 1;
305 break;
306 default:
307 value = this.element.css(prop);
308 }
309
310 return (value || 0);
311 }
312
313 });
314
315
316 // helper
317
318 function initBgImageParallax(obj, prop, opts) {
319
320 var img = new Image(), url, element, size, check, ratio, width, height;
321
322 element = obj.element.css({'background-size': 'cover', 'background-repeat': 'no-repeat'});
323 url = element.css('background-image').replace(/^url\(/g, '').replace(/\)$/g, '').replace(/("|')/g, '');
324 check = function() {
325
326 var w = element.innerWidth(), h = element.innerHeight(), extra = (prop=='bg') ? opts.diff : (opts.diff/100) * h;
327
328 h += extra;
329 w += Math.ceil(extra * ratio);
330
331 if (w-extra < size.w && h < size.h) {
332 return obj.element.css({'background-size': 'auto'});
333 }
334
335 // if element height < parent height (gap underneath)
336 if ((w / ratio) < h) {
337
338 width = Math.ceil(h * ratio);
339 height = h;
340
341 if (h > window.innerHeight) {
342 width = width * 1.2;
343 height = height * 1.2;
344 }
345
346 // element width < parent width (gap to right)
347 } else {
348
349 width = w;
350 height = Math.ceil(w / ratio);
351 }
352
353 element.css({'background-size': (width+'px '+height+'px')}).data('bgsize', {w:width,h:height});
354 };
355
356 img.onerror = function(){
357 // image url doesn't exist
358 };
359
360 img.onload = function(){
361 size = {w:img.width, h:img.height};
362 ratio = img.width / img.height;
363
364 UI.$win.on("load resize orientationchange", UI.Utils.debounce(function(){
365 check();
366 }, 50));
367
368 check();
369 };
370
371 img.src = url;
372
373 return true;
374 }
375
376
377 // Some named colors to work with, added by Bradley Ayers
378 // From Interface by Stefan Petre
379 // http://interface.eyecon.ro/
380 var colors = {
381 'black': [0,0,0,1],
382 'blue': [0,0,255,1],
383 'brown': [165,42,42,1],
384 'cyan': [0,255,255,1],
385 'fuchsia': [255,0,255,1],
386 'gold': [255,215,0,1],
387 'green': [0,128,0,1],
388 'indigo': [75,0,130,1],
389 'khaki': [240,230,140,1],
390 'lime': [0,255,0,1],
391 'magenta': [255,0,255,1],
392 'maroon': [128,0,0,1],
393 'navy': [0,0,128,1],
394 'olive': [128,128,0,1],
395 'orange': [255,165,0,1],
396 'pink': [255,192,203,1],
397 'purple': [128,0,128,1],
398 'violet': [128,0,128,1],
399 'red': [255,0,0,1],
400 'silver': [192,192,192,1],
401 'white': [255,255,255,1],
402 'yellow': [255,255,0,1],
403 'transparent': [255,255,255,0]
404 };
405
406 function calcColor(start, end, pos) {
407
408 start = parseColor(start);
409 end = parseColor(end);
410 pos = pos || 0;
411
412 return calculateColor(start, end, pos);
413 }
414
415 /**!
416 * @preserve Color animation 1.6.0
417 * http://www.bitstorm.org/jquery/color-animation/
418 * Copyright 2011, 2013 Edwin Martin <edwin@bitstorm.org>
419 * Released under the MIT and GPL licenses.
420 */
421
422 // Calculate an in-between color. Returns "#aabbcc"-like string.
423 function calculateColor(begin, end, pos) {
424 var color = 'rgba('
425 + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
426 + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
427 + parseInt((begin[2] + pos * (end[2] - begin[2])), 10) + ','
428 + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
429
430 color += ')';
431 return color;
432 }
433
434 // Parse an CSS-syntax color. Outputs an array [r, g, b]
435 function parseColor(color) {
436
437 var match, quadruplet;
438
439 // Match #aabbcc
440 if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
441 quadruplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];
442
443 // Match #abc
444 } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
445 quadruplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];
446
447 // Match rgb(n, n, n)
448 } else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
449 quadruplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];
450
451 } else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
452 quadruplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];
453
454 // No browser returns rgb(n%, n%, n%), so little reason to support this format.
455 } else {
456 quadruplet = colors[color] || [255,255,255,0];
457 }
458 return quadruplet;
459 }
460
461 return UI.parallax;
462});
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-14 12:52:02 +0000