https://www.scalabad.no/scripts/libraries/paraxify.js

1// Generated by CoffeeScript 1.7.1
2
3/*
4 Paraxify.js - v0.1
5 @author Jaime Caballero
6 MIT license
7 */
8(function (document, window, index) {
9    "use strict";
10    var paraxify;
11    paraxify = function (el, options) {
12        var Paraxify, contador, i, opt, pho, posY, screenY;
13        posY = 0;
14        screenY = 0;
15        i = 0;
16        opt = {};
17        pho = [];
18        contador = 0;
19        Paraxify = function (el, options) {
20            this.options = {
21                speed: 1,
22                boost: 0
23            };
24            for (i in options) {
25                this.options[i] = options[i];
26            }
27            if (this.options.speed < 0 || this.options.speed > 1) {
28                this.options.speed = 1;
29            }
30            if (!el) {
31                el = 'paraxify';
32            }
33            if (document.getElementsByClassName(el.replace('.', ''))) {
34                this.photos = document.getElementsByClassName(el.replace('.', ''));
35            } else if (document.querySelector(el) !== false) {
36                this.photos = querySelector(el);
37            } else {
38                throw new Error("The elements you're trying to select don't exist.");
39            }
40            opt = this.options;
41            pho = this.photos;
42            this._init(this);
43        };
44        Paraxify.prototype = {
45            update: function () {
46                screenY = window.innerHeight;
47                i = 0;
48                while (i < pho.length) {
49                    pho[i].style.backgroundPosition = "center center";
50                    pho[i].url = window.getComputedStyle(pho[i], false).backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
51                    if (!pho[i].img) {
52                        pho[i].img = new Image();
53                    }
54                    if (pho[i].url !== pho[i].img.src) {
55                        this._check(i);
56                        pho[i].img.src = pho[i].url;
57                    }
58                    i++;
59                }
60                this._animate();
61            },
62            _init: function () {
63                this.update();
64                window.onscroll = (function () {
65                    this._animate();
66                }).bind(this);
67                window.onresize = (function () {
68                    this.update();
69                }).bind(this);
70            },
71            _check: function (i) {
72                var actualHeight, main;
73                main = pho[i];
74                main.ok = true;
75                main.bgSize = window.getComputedStyle(main, false).backgroundSize;
76                actualHeight = screenY;
77                if (pho[i].img == undefined || pho[i].img == null)
78                    return; 
79
80                pho[i].img.onload = function () {
81                    if (main.bgSize === '' || main.bgSize === 'auto') {
82                        if (this.height < main.offsetHeight) {
83                            main.ok = false;
84                            throw new Error("The image " + main.url + " (" + this.height + "px) is too short for that container (" + main.offsetHeight + "px).");
85                        } else {
86                            actualHeight = this.height;
87                            if (this.height < screenY) {
88                                actualHeight = actualHeight + ((screenY - main.offsetHeight) * opt.speed);
89                            }
90                        }
91                    } else if (main.bgSize === 'cover') {
92                        if (screenY < main.offsetHeight) {
93                            main.ok = false;
94                            throw new Error("The container (" + main.offsetHeight + "px) can't be bigger than the image (" + screenY + "px).");
95                        }
96                    } else {
97                        window.getComputedStyle(main, false).backgroundSize === 'cover';
98                        this._check(i);
99                    }
100                    main.diff = -(actualHeight - main.offsetHeight) * opt.speed;
101                    main.diff = main.diff - (main.offsetHeight * opt.boost);
102                };
103            },
104            _visible: function (i) {
105                if (((posY + screenY) > this._offsetTop(pho[i])) && (posY < this._offsetTop(pho[i]) + ph

105o[i].offsetHeight)) {
106                    return true;
107                }
108                return false;
109            },
110            _animate: function () {
111                var per, position;
112                if (window.pageYOffset !== void 0) {
113                    posY = window.pageYOffset;
114                } else {
115                    posY = (document.documentElement || document.body.parentNode || document.body).scrollTop;
116                }
117                i = 0;
118                while (i < pho.length) {
119                    this._check(i);
120                    if (pho[i].ok && window.getComputedStyle(pho[i], false).backgroundAttachment === "fixed" && this._visible(i)) {
121                        per = (posY - this._offsetTop(pho[i]) + screenY) / (pho[i].offsetHeight + screenY);
122                        position = pho[i].diff * (per - 0.5);
123                        if (pho[i].bgSize !== 'cover') {
124                            position = position + ((screenY - pho[i].img.height) / 2);
125                        }
126                        position = Math.round(position * 100) / 100;
127                    } else {
128                        position = "center";
129                    }
130                    pho[i].style.backgroundPosition = "center " + position + "px";
131                    i++;
132                }
133            },
134            _offsetTop: function (element) {
135                return jQuery(element).offset().top;
136            }
137        };
138        return new Paraxify(el, options);
139    };
140    window.paraxify = paraxify;
141})(document, window, 0);