Ruchome tło parallax

screenshot-2016-11-23-18-34-23Dziś pokażę jak zrobić ładny i ciekawy efekt ruchomego tła parallax. Kiedy zaczniecie suwakiem przesuwać stronę w dół, to zobaczycie jak to działa. Efekt składa się z kilku warstw grafiki, czyli kilku obrazków png z przeźroczystym tłem, aby efekt zadziałał, to każdy element jest zapisany jako oddzielny obrazek.

Do działania efektu potrzebujemy plików: index.html, style.css i folderu „js” z plikami: index.js i basicScroll.min.js.


Tworzymy plik index.html o zawartości:


<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Parallax scene</title>

<meta name="robots" content="index, follow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="www.tworzenie-stronek.pl" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<img class="scene" data-modifier="30" src="https://parallaxbilder-qmogbogaoz.now.sh/p0.png">
<img class="scene" data-modifier="18" src="https://parallaxbilder-qmogbogaoz.now.sh/p1.png">
<img class="scene" data-modifier="12" src="https://parallaxbilder-qmogbogaoz.now.sh/p2.png">
<img class="scene" data-modifier="8" src="https://parallaxbilder-qmogbogaoz.now.sh/p3.png">
<img class="scene" data-modifier="6" src="https://parallaxbilder-qmogbogaoz.now.sh/p4.png">
<img class="scene" data-modifier="0" src="https://parallaxbilder-qmogbogaoz.now.sh/p6.png">

<script src='js/basicScroll.min.js'></script>
<script src="js/index.js"></script>

</body>
</html>

Zastosowałam standardowy szablon z potrzebnymi nagłówkami i stylami. Nie omawiam każdej linijki po kolei, bo z tego co pamiętam robiłam to w poprzednich tutorialach.

To co należy do skryptu to kod obrazków który wklejamy w body:

<img class="scene" data-modifier="30" src="https://parallaxbilder-qmogbogaoz.now.sh/p0.png">
<img class="scene" data-modifier="18" src="https://parallaxbilder-qmogbogaoz.now.sh/p1.png">
<img class="scene" data-modifier="12" src="https://parallaxbilder-qmogbogaoz.now.sh/p2.png">
<img class="scene" data-modifier="8" src="https://parallaxbilder-qmogbogaoz.now.sh/p3.png">
<img class="scene" data-modifier="6" src="https://parallaxbilder-qmogbogaoz.now.sh/p4.png">
<img class="scene" data-modifier="0" src="https://parallaxbilder-qmogbogaoz.now.sh/p6.png">

Do powyższego kodu jak widać jest nadana klasa o nazwie „scene” i data-modifier który odpowiada za ruch każdego elementu.

Na dole kodu strony, przed </body> dodajemy jeszcze 2 linijki kodu js, potrzebnego do działania skryptu:

<script src='js/basicScroll.min.js'></script>
<script src="js/index.js"></script>

 


Zawartość pliku style.css:

* { padding: 0; margin: 0; }

html, body {
 width: 100%;
 height: 2000px;
 margin: 0 auto;
 background-color: #000000;
 }

.scene {
    position: absolute;
    width: 100%;
    transform: translateY(var(--translateY));
    will-change: transform;
}

Czyli standardowy kod body, uprościłam tylko by pokazać efekt skryptu.

W body dodałam:

height: 2000px;

Dzięki czemu strona jest dłuższa i można zobaczyć efekt parallax.
No i styl .scene przypisany do każdego obrazka.

 


Zawartość folderu js i pliku index.js:


'use strict';

var scenes = document.querySelectorAll('.scene');

Array.prototype.forEach.call(scenes, function (elem) {

var modifier = elem.getAttribute('data-modifier');

basicScroll.create({
elem: elem,
from: 0,
to: 519,
props: {
'--translateY': {
from: '0',
to: 10 * modifier + 'px',
direct: true
}
}
}).start();
});


Zawartość folderu js i pliku basicScroll.min.js:


!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r;r="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,r.basicScroll=t()}}(function(){return function t(r,n,e){function o(u,f){if(!n[u]){if(!r[u]){var s="function"==typeof require&&require;if(!f&&s)return s(u,!0);if(i)return i(u,!0);var a=new Error("Cannot find module '"+u+"'");throw a.code="MODULE_NOT_FOUND",a}var c=n[u]={exports:{}};r[u][0].call(c.exports,function(t){var n=r[u][1][t];return o(n?n:t)},c,c.exports,t,r,n,e)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<e.length;u++)o(e[u]);return o}({1:[function(t,r,n){"use strict";function e(t){var r=t.length;if(r%4>0)throw new Error("Invalid string. Length must be a multiple of 4");return"="===t[r-2]?2:"="===t[r-1]?1:0}function o(t){return 3*t.length/4-e(t)}function i(t){var r,n,o,i,u,f,s=t.length;u=e(t),f=new h(3*s/4-u),o=u>0?s-4:s;var a=0;for(r=0,n=0;r<o;r+=4,n+=3)i=c[t.charCodeAt(r)]<<18|c[t.charCodeAt(r+1)]<<12|c[t.charCodeAt(r+2)]<<6|c[t.charCodeAt(r+3)],f[a++]=i>>16&255,f[a++]=i>>8&255,f[a++]=255&i;return 2===u?(i=c[t.charCodeAt(r)]<<2|c[t.charCodeAt(r+1)]>>4,f[a++]=255&i):1===u&&(i=c[t.charCodeAt(r)]<<10|c[t.charCodeAt(r+1)]<<4|c[t.charCodeAt(r+2)]>>2,f[a++]=i>>8&255,f[a++]=255&i),f}function u(t){return a[t>>18&63]+a[t>>12&63]+a[t>>6&63]+a[63&t]}function f(t,r,n){for(var e,o=[],i=r;i<n;i+=3)e=(t[i]<<16)+(t[i+1]<<8)+t[i+2],o.push(u(e));return o.join("")}function s(t){for(var r,n=t.length,e=n%3,o="",i=[],u=16383,s=0,c=n-e;s<c;s+=u)i.push(f(t,s,s+u>c?c:s+u));return 1===e?(r=t[n-1],o+=a[r>>2],o+=a[r<<4&63],o+="=="):2===e&&(r=(t[n-2]<<8)+t[n-1],o+=a[r>>10],o+=a[r>>4&63],o+=a[r<<2&63],o+="="),i.push(o),i.join("")}n.byteLength=o,n.toByteArray=i,n.fromByteArray=s;for(var a=[],c=[],h="undefined"!=typeof Uint8Array?Uint8Array:Array,l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",p=0,y=l.length;p<y;++p)a[p]=l[p],c[l.charCodeAt(p)]=p;c["-".charCodeAt(0)]=62,c["_".charCodeAt(0)]=63},{}],2:[function(t,r,n){(function(r){"use strict";function e(){try{var t=new Uint8Array(1);return t.__proto__={__proto__:Uint8Array.prototype,foo:function(){return 42}},42===t.foo()&&"function"==typeof t.subarray&&0===t.subarray(1,1).byteLength}catch(t){return!1}}function o(){return u.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function i(t,r){if(o()<r)throw new RangeError("Invalid typed array length");return u.TYPED_ARRAY_SUPPORT?(t=new Uint8Array(r),t.__proto__=u.prototype):(null===t&&(t=new u(r)),t.length=r),t}function u(t,r,n){if(!(u.TYPED_ARRAY_SUPPORT||this instanceof u))return new u(t,r,n);if("number"==typeof t){if("string"==typeof r)throw new Error("If encoding is specified then the first argument must be a string");return c(this,t)}return f(this,t,r,n)}function f(t,r,n,e){if("number"==typeof r)throw new TypeError('"value" argument must not be a number');return"undefined"!=typeof ArrayBuffer&&r instanceof ArrayBuffer?p(t,r,n,e):"string"==typeof r?h(t,r,n):y(t,r)}function s(t){if("number"!=typeof t)throw new TypeError('"size" argument must be a number');if(t<0)throw new RangeError('"size" argument must not be negative')}function a(t,r,n,e){return s(r),r<=0?i(t,r):void 0!==n?"string"==typeof e?i(t,r).fill(n,e):i(t,r).fill(n):i(t,r)}function c(t,r){if(s(r),t=i(t,r<0?0:0|g(r)),!u.TYPED_ARRAY_SUPPORT)for(var n=0;n<r;++n)t[n]=0;return t}function h(t,r,n){if("string"==typeof n&&""!==n||(n="utf8"),!u.isEncoding(n))throw new TypeError('"encoding" must be a valid string encoding');var e=0|w(r,n);t=i(t,e);var o=t.write(r,n);return o!==e&&(t=t.slice(0,o)),t}function l(t,r){var n=r.length<0?0:0|g(r.length);t=i(t,n);for(var e=0;e<n;e+=1)t[e]=255&r[e];return t}function p(t,r,n,e){if(r.byteLength,n<0||r.byteLength<n)throw new RangeError("'offset' is out of bounds");if(r.byteLength<n+(e||0))throw new RangeError("'length' is out of bounds");return r=void 0===n&&void 0===e?new Uint8Array(r):void 0===e?new Uint8Array(r,n):new Uint8Array(r,n,e),u.TYPED_ARRAY_SUPPORT?(t=r,t.__proto__=u.prototype):t=l(t,r),t}function y(t,r){if(u.isBuffer(r)){var n=0|g(r.length);return t=i(t,n),0===t.length?t:(r.copy(t,0,0,n),t)}if(r){if("undefined"!=typeof ArrayBuffer&&r.buffer instanceof ArrayBuffer||"length"in r)return"number"!=typeof r.length||Z(r.length)?i(t,0):l(t,r);if("Buffer"===r.type&&W(r.data))return l(t,r.data)}throw new TypeError("First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.")}function g(t){if(t>=o())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+o().toString(16)+" bytes");return 0|t}function d(t){return+t!=t&&(t=0),u.alloc(+t)}function w(t,r){if(u.isBuffer(t))return t.length;if("undefined"!=typeof ArrayBuffer&&"function"==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(t)||t instanceof ArrayBuffer))return t.byteLength;"string"!=typeof t&&(t=""+t);var n=t.length;if(0===n)return 0;for(var e=!1;;)switch(r){case"ascii":case"latin1":case"binary":return n;case"utf8":case"utf-8":case void 0:return $(t).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*n;case"hex":return n>>>1;case"base64":return X(t).length;default:if(e)return $(t).length;r=(""+r).toLowerCase(),e=!0}}function v(t,r,n){var e=!1;if((void 0===r||r<0)&&(r=0),r>this.length)return"";if((void 0===n||n>this.length)&&(n=this.length),n<=0)return"";if(n>>>=0,r>>>=0,n<=r)return"";for(t||(t="utf8");;)switch(t){case"hex":return U(this,r,n);case"utf8":case"utf-8":return O(this,r,n);case"ascii":return B(this,r,n);case"latin1":case"binary":return I(this,r,n);case"base64":return M(this,r,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return Y(this,r,n);default:if(e)throw new TypeError("Unknown encoding: "+t);t=(t+"").toLowerCase(),e=!0}}function b(t,r,n){var e=t[r];t[r]=t[n],t[n]=e}function m(t,r,n,e,o){if(0===t.length)return-1;if("string"==typeof n?(e=n,n=0):n>2147483647?n=2147483647:n<-2147483648&&(n=-2147483648),n=+n,isNaN(n)&&(n=o?0:t.length-1),n<0&&(n=t.length+n),n>=t.length){if(o)return-1;n=t.length-1}else if(n<0){if(!o)return-1;n=0}if("string"==typeof r&&(r=u.from(r,e)),u.isBuffer(r))return 0===r.length?-1:E(t,r,n,e,o);if("number"==typeof r)return r=255&r,u.TYPED_ARRAY_SUPPORT&&"function"==typeof Uint8Array.prototype.indexOf?o?Uint8Array.prototype.indexOf.call(t,r,n):Uint8Array.prototype.lastIndexOf.call(t,r,n):E(t,[r],n,e,o);throw new TypeError("val must be string, number or Buffer")}function E(t,r,n,e,o){function i(t,r){return 1===u?t[r]:t.readUInt16BE(r*u)}var u=1,f=t.length,s=r.length;if(void 0!==e&&(e=String(e).toLowerCase(),"ucs2"===e||"ucs-2"===e||"utf16le"===e||"utf-16le"===e)){if(t.length<2||r.length<2)return-1;u=2,f/=2,s/=2,n/=2}var a;if(o){var c=-1;for(a=n;a<f;a++)if(i(t,a)===i(r,c===-1?0:a-c)){if(c===-1&&(c=a),a-c+1===s)return c*u}else c!==-1&&(a-=a-c),c=-1}else for(n+s>f&&(n=f-s),a=n;a>=0;a--){for(var h=!0,l=0;l<s;l++)if(i(t,a+l)!==i(r,l)){h=!1;break}if(h)return a}return-1}function A(t,r,n,e){n=Number(n)||0;var o=t.length-n;e?(e=Number(e),e>o&&(e=o)):e=o;var i=r.length;if(i%2!==0)throw new TypeError("Invalid hex string");e>i/2&&(e=i/2);for(var u=0;u<e;++u){var f=parseInt(r.substr(2*u,2),16);if(isNaN(f))return u;t[n+u]=f}return u}function _(t,r,n,e){return J($(r,t.length-n),t,n,e)}function R(t,r,n,e){return J(H(r),t,n,e)}function P(t,r,n,e){return R(t,r,n,e)}function S(t,r,n,e){return J(X(r),t,n,e)}function x(t,r,n,e){return J(K(r,t.length-n),t,n,e)}function M(t,r,n){return 0===r&&n===t.length?G.fromByteArray(t):G.fromByteArray(t.slice(r,n))}function O(t,r,n){n=Math.min(t.length,n);for(var e=[],o=r;o<n;){var i=t[o],u=null,f=i>239?4:i>223?3:i>191?2:1;if(o+f<=n){var s,a,c,h;switch(f){case 1:i<128&&(u=i);break;case 2:s=t[o+1],128===(192&s)&&(h=(31&i)<<6|63&s,h>127&&(u=h));break;case 3:s=t[o+1],a=t[o+2],128===(192&s)&&128===(192&a)&&(h=(15&i)<<12|(63&s)<<6|63&a,h>2047&&(h<55296||h>57343)&&(u=h));break;case 4:s=t[o+1],a=t[o+2],c=t[o+3],128===(192&s)&&128===(192&a)&&128===(192&c)&&(h=(15&i)<<18|(63&s)<<12|(63&a)<<6|63&c,h>65535&&h<1114112&&(u=h))}}null===u?(u=65533,f=1):u>65535&&(u-=65536,e.push(u>>>10&1023|55296),u=56320|1023&u),e.push(u),o+=f}return T(e)}function T(t){var r=t.length;if(r<=tt)return String.fromCharCode.apply(String,t);for(var n="",e=0;e<r;)n+=String.fromCharCode.apply(String,t.slice(e,e+=tt));return n}function B(t,r,n){var e="";n=Math.min(t.length,n);for(var o=r;o<n;++o)e+=String.fromCharCode(127&t[o]);return e}function I(t,r,n){var e="";n=Math.min(t.length,n);for(var o=r;o<n;++o)e+=String.fromCharCode(t[o]);return e}function U(t,r,n){var e=t.length;(!r||r<0)&&(r=0),(!n||n<0||n>e)&&(n=e);for(var o="",i=r;i<n;++i)o+=V(t[i]);return o}function Y(t,r,n){for(var e=t.slice(r,n),o="",i=0;i<e.length;i+=2)o+=String.fromCharCode(e[i]+256*e[i+1]);return o}function q(t,r,n){if(t%1!==0||t<0)throw new RangeError("offset is not uint");if(t+r>n)throw new RangeError("Trying to access beyond buffer length")}function C(t,r,n,e,o,i){if(!u.isBuffer(t))throw new TypeError('"buffer" argument must be a Buffer instance');if(r>o||r<i)throw new RangeError('"value" argument is out of bounds');if(n+e>t.length)throw new RangeError("Index out of range")}function D(t,r,n,e){r<0&&(r=65535+r+1);for(var o=0,i=Math.min(t.length-n,2);o<i;++o)t[n+o]=(r&255<<8*(e?o:1-o))>>>8*(e?o:1-o)}function L(t,r,n,e){r<0&&(r=4294967295+r+1);for(var o=0,i=Math.min(t.length-n,4);o<i;++o)t[n+o]=r>>>8*(e?o:3-o)&255}function k(t,r,n,e,o,i){if(n+e>t.length)throw new RangeError("Index out of range");if(n<0)throw new RangeError("Index out of range")}function j(t,r,n,e,o){return o||k(t,r,n,4,3.4028234663852886e38,-3.4028234663852886e38),Q.write(t,r,n,e,23,4),n+4}function N(t,r,n,e,o){return o||k(t,r,n,8,1.7976931348623157e308,-1.7976931348623157e308),Q.write(t,r,n,e,52,8),n+8}function z(t){if(t=F(t).replace(rt,""),t.length<2)return"";for(;t.length%4!==0;)t+="=";return t}function F(t){return t.trim?t.trim():t.replace(/^\s+|\s+$/g,"")}function V(t){return t<16?"0"+t.toString(16):t.toString(16)}function $(t,r){r=r||1/0;for(var n,e=t.length,o=null,i=[],u=0;u<e;++u){if(n=t.charCodeAt(u),n>55295&&n<57344){if(!o){if(n>56319){(r-=3)>-1&&i.push(239,191,189);continue}if(u+1===e){(r-=3)>-1&&i.push(239,191,189);continue}o=n;continue}if(n<56320){(r-=3)>-1&&i.push(239,191,189),o=n;continue}n=(o-55296<<10|n-56320)+65536}else o&&(r-=3)>-1&&i.push(239,191,189);if(o=null,n<128){if((r-=1)<0)break;i.push(n)}else if(n<2048){if((r-=2)<0)break;i.push(n>>6|192,63&n|128)}else if(n<65536){if((r-=3)<0)break;i.push(n>>12|224,n>>6&63|128,63&n|128)}else{if(!(n<1114112))throw new Error("Invalid code point");if((r-=4)<0)break;i.push(n>>18|240,n>>12&63|128,n>>6&63|128,63&n|128)}}return i}function H(t){for(var r=[],n=0;n<t.length;++n)r.push(255&t.charCodeAt(n));return r}function K(t,r){for(var n,e,o,i=[],u=0;u<t.length&&!((r-=2)<0);++u)n=t.charCodeAt(u),e=n>>8,o=n%256,i.push(o),i.push(e);return i}function X(t){return G.toByteArray(z(t))}function J(t,r,n,e){for(var o=0;o<e&&!(o+n>=r.length||o>=t.length);++o)r[o+n]=t[o];return o}function Z(t){return t!==t}var G=t("base64-js"),Q=t("ieee754"),W=t("isarray");n.Buffer=u,n.SlowBuffer=d,n.INSPECT_MAX_BYTES=50,u.TYPED_ARRAY_SUPPORT=void 0!==r.TYPED_ARRAY_SUPPORT?r.TYPED_ARRAY_SUPPORT:e(),n.kMaxLength=o(),u.poolSize=8192,u._augment=function(t){return t.__proto__=u.prototype,t},u.from=function(t,r,n){return f(null,t,r,n)},u.TYPED_ARRAY_SUPPORT&&(u.prototype.__proto__=Uint8Array.prototype,u.__proto__=Uint8Array,"undefined"!=typeof Symbol&&Symbol.species&&u[Symbol.species]===u&&Object.defineProperty(u,Symbol.species,{value:null,configurable:!0})),u.alloc=function(t,r,n){return a(null,t,r,n)},u.allocUnsafe=function(t){return c(null,t)},u.allocUnsafeSlow=function(t){return c(null,t)},u.isBuffer=function(t){return!(null==t||!t._isBuffer)},u.compare=function(t,r){if(!u.isBuffer(t)||!u.isBuffer(r))throw new TypeError("Arguments must be Buffers");if(t===r)return 0;for(var n=t.length,e=r.length,o=0,i=Math.min(n,e);o<i;++o)if(t[o]!==r[o]){n=t[o],e=r[o];break}return n<e?-1:e<n?1:0},u.isEncoding=function(t){switch(String(t).toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"latin1":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return!0;default:return!1}},u.concat=function(t,r){if(!W(t))throw new TypeError('"list" argument must be an Array of Buffers');if(0===t.length)return u.alloc(0);var n;if(void 0===r)for(r=0,n=0;n<t.length;++n)r+=t[n].length;var e=u.allocUnsafe(r),o=0;for(n=0;n<t.length;++n){var i=t[n];if(!u.isBuffer(i))throw new TypeError('"list" argument must be an Array of Buffers');i.copy(e,o),o+=i.length}return e},u.byteLength=w,u.prototype._isBuffer=!0,u.prototype.swap16=function(){var t=this.length;if(t%2!==0)throw new RangeError("Buffer size must be a multiple of 16-bits");for(var r=0;r<t;r+=2)b(this,r,r+1);return this},u.prototype.swap32=function(){var t=this.length;if(t%4!==0)throw new RangeError("Buffer size must be a multiple of 32-bits");for(var r=0;r<t;r+=4)b(this,r,r+3),b(this,r+1,r+2);return this},u.prototype.swap64=function(){var t=this.length;if(t%8!==0)throw new RangeError("Buffer size must be a multiple of 64-bits");for(var r=0;r<t;r+=8)b(this,r,r+7),b(this,r+1,r+6),b(this,r+2,r+5),b(this,r+3,r+4);return this},u.prototype.toString=function(){var t=0|this.length;return 0===t?"":0===arguments.length?O(this,0,t):v.apply(this,arguments)},u.prototype.equals=function(t){if(!u.isBuffer(t))throw new TypeError("Argument must be a Buffer");return this===t||0===u.compare(this,t)},u.prototype.inspect=function(){var t="",r=n.INSPECT_MAX_BYTES;return this.length>0&&(t=this.toString("hex",0,r).match(/.{2}/g).join(" "),this.length>r&&(t+=" ... ")),"<Buffer "+t+">"},u.prototype.compare=function(t,r,n,e,o){if(!u.isBuffer(t))throw new TypeError("Argument must be a Buffer");if(void 0===r&&(r=0),void 0===n&&(n=t?t.length:0),void 0===e&&(e=0),void 0===o&&(o=this.length),r<0||n>t.length||e<0||o>this.length)throw new RangeError("out of range index");if(e>=o&&r>=n)return 0;if(e>=o)return-1;if(r>=n)return 1;if(r>>>=0,n>>>=0,e>>>=0,o>>>=0,this===t)return 0;for(var i=o-e,f=n-r,s=Math.min(i,f),a=this.slice(e,o),c=t.slice(r,n),h=0;h<s;++h)if(a[h]!==c[h]){i=a[h],f=c[h];break}return i<f?-1:f<i?1:0},u.prototype.includes=function(t,r,n){return this.indexOf(t,r,n)!==-1},u.prototype.indexOf=function(t,r,n){return m(this,t,r,n,!0)},u.prototype.lastIndexOf=function(t,r,n){return m(this,t,r,n,!1)},u.prototype.write=function(t,r,n,e){if(void 0===r)e="utf8",n=this.length,r=0;else if(void 0===n&&"string"==typeof r)e=r,n=this.length,r=0;else{if(!isFinite(r))throw new Error("Buffer.write(string, encoding, offset[, length]) is no longer supported");r=0|r,isFinite(n)?(n=0|n,void 0===e&&(e="utf8")):(e=n,n=void 0)}var o=this.length-r;if((void 0===n||n>o)&&(n=o),t.length>0&&(n<0||r<0)||r>this.length)throw new RangeError("Attempt to write outside buffer bounds");e||(e="utf8");for(var i=!1;;)switch(e){case"hex":return A(this,t,r,n);case"utf8":case"utf-8":return _(this,t,r,n);case"ascii":return R(this,t,r,n);case"latin1":case"binary":return P(this,t,r,n);case"base64":return S(this,t,r,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return x(this,t,r,n);default:if(i)throw new TypeError("Unknown encoding: "+e);e=(""+e).toLowerCase(),i=!0}},u.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var tt=4096;u.prototype.slice=function(t,r){var n=this.length;t=~~t,r=void 0===r?n:~~r,t<0?(t+=n,t<0&&(t=0)):t>n&&(t=n),r<0?(r+=n,r<0&&(r=0)):r>n&&(r=n),r<t&&(r=t);var e;if(u.TYPED_ARRAY_SUPPORT)e=this.subarray(t,r),e.__proto__=u.prototype;else{var o=r-t;e=new u(o,(void 0));for(var i=0;i<o;++i)e[i]=this[i+t]}return e},u.prototype.readUIntLE=function(t,r,n){t=0|t,r=0|r,n||q(t,r,this.length);for(var e=this[t],o=1,i=0;++i<r&&(o*=256);)e+=this[t+i]*o;return e},u.prototype.readUIntBE=function(t,r,n){t=0|t,r=0|r,n||q(t,r,this.length);for(var e=this[t+--r],o=1;r>0&&(o*=256);)e+=this[t+--r]*o;return e},u.prototype.readUInt8=function(t,r){return r||q(t,1,this.length),this[t]},u.prototype.readUInt16LE=function(t,r){return r||q(t,2,this.length),this[t]|this[t+1]<<8},u.prototype.readUInt16BE=function(t,r){return r||q(t,2,this.length),this[t]<<8|this[t+1]},u.prototype.readUInt32LE=function(t,r){return r||q(t,4,this.length),(this[t]|this[t+1]<<8|this[t+2]<<16)+16777216*this[t+3]},u.prototype.readUInt32BE=function(t,r){return r||q(t,4,this.length),16777216*this[t]+(this[t+1]<<16|this[t+2]<<8|this[t+3])},u.prototype.readIntLE=function(t,r,n){t=0|t,r=0|r,n||q(t,r,this.length);for(var e=this[t],o=1,i=0;++i<r&&(o*=256);)e+=this[t+i]*o;return o*=128,e>=o&&(e-=Math.pow(2,8*r)),e},u.prototype.readIntBE=function(t,r,n){t=0|t,r=0|r,n||q(t,r,this.length);for(var e=r,o=1,i=this[t+--e];e>0&&(o*=256);)i+=this[t+--e]*o;return o*=128,i>=o&&(i-=Math.pow(2,8*r)),i},u.prototype.readInt8=function(t,r){return r||q(t,1,this.length),128&this[t]?(255-this[t]+1)*-1:this[t]},u.prototype.readInt16LE=function(t,r){r||q(t,2,this.length);var n=this[t]|this[t+1]<<8;return 32768&n?4294901760|n:n},u.prototype.readInt16BE=function(t,r){r||q(t,2,this.length);var n=this[t+1]|this[t]<<8;return 32768&n?4294901760|n:n},u.prototype.readInt32LE=function(t,r){return r||q(t,4,this.length),this[t]|this[t+1]<<8|this[t+2]<<16|this[t+3]<<24},u.prototype.readInt32BE=function(t,r){return r||q(t,4,this.length),this[t]<<24|this[t+1]<<16|this[t+2]<<8|this[t+3]},u.prototype.readFloatLE=function(t,r){return r||q(t,4,this.length),Q.read(this,t,!0,23,4)},u.prototype.readFloatBE=function(t,r){return r||q(t,4,this.length),Q.read(this,t,!1,23,4)},u.prototype.readDoubleLE=function(t,r){return r||q(t,8,this.length),Q.read(this,t,!0,52,8)},u.prototype.readDoubleBE=function(t,r){return r||q(t,8,this.length),Q.read(this,t,!1,52,8)},u.prototype.writeUIntLE=function(t,r,n,e){if(t=+t,r=0|r,n=0|n,!e){var o=Math.pow(2,8*n)-1;C(this,t,r,n,o,0)}var i=1,u=0;for(this[r]=255&t;++u<n&&(i*=256);)this[r+u]=t/i&255;return r+n},u.prototype.writeUIntBE=function(t,r,n,e){if(t=+t,r=0|r,n=0|n,!e){var o=Math.pow(2,8*n)-1;C(this,t,r,n,o,0)}var i=n-1,u=1;for(this[r+i]=255&t;--i>=0&&(u*=256);)this[r+i]=t/u&255;return r+n},u.prototype.writeUInt8=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,1,255,0),u.TYPED_ARRAY_SUPPORT||(t=Math.floor(t)),this[r]=255&t,r+1},u.prototype.writeUInt16LE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,2,65535,0),u.TYPED_ARRAY_SUPPORT?(this[r]=255&t,this[r+1]=t>>>8):D(this,t,r,!0),r+2},u.prototype.writeUInt16BE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,2,65535,0),u.TYPED_ARRAY_SUPPORT?(this[r]=t>>>8,this[r+1]=255&t):D(this,t,r,!1),r+2},u.prototype.writeUInt32LE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[r+3]=t>>>24,this[r+2]=t>>>16,this[r+1]=t>>>8,this[r]=255&t):L(this,t,r,!0),r+4},u.prototype.writeUInt32BE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[r]=t>>>24,this[r+1]=t>>>16,this[r+2]=t>>>8,this[r+3]=255&t):L(this,t,r,!1),r+4},u.prototype.writeIntLE=function(t,r,n,e){if(t=+t,r=0|r,!e){var o=Math.pow(2,8*n-1);C(this,t,r,n,o-1,-o)}var i=0,u=1,f=0;for(this[r]=255&t;++i<n&&(u*=256);)t<0&&0===f&&0!==this[r+i-1]&&(f=1),this[r+i]=(t/u>>0)-f&255;return r+n},u.prototype.writeIntBE=function(t,r,n,e){if(t=+t,r=0|r,!e){var o=Math.pow(2,8*n-1);C(this,t,r,n,o-1,-o)}var i=n-1,u=1,f=0;for(this[r+i]=255&t;--i>=0&&(u*=256);)t<0&&0===f&&0!==this[r+i+1]&&(f=1),this[r+i]=(t/u>>0)-f&255;return r+n},u.prototype.writeInt8=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,1,127,-128),u.TYPED_ARRAY_SUPPORT||(t=Math.floor(t)),t<0&&(t=255+t+1),this[r]=255&t,r+1},u.prototype.writeInt16LE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[r]=255&t,this[r+1]=t>>>8):D(this,t,r,!0),r+2},u.prototype.writeInt16BE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[r]=t>>>8,this[r+1]=255&t):D(this,t,r,!1),r+2},u.prototype.writeInt32LE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,4,2147483647,-2147483648),u.TYPED_ARRAY_SUPPORT?(this[r]=255&t,this[r+1]=t>>>8,this[r+2]=t>>>16,this[r+3]=t>>>24):L(this,t,r,!0),r+4},u.prototype.writeInt32BE=function(t,r,n){return t=+t,r=0|r,n||C(this,t,r,4,2147483647,-2147483648),t<0&&(t=4294967295+t+1),u.TYPED_ARRAY_SUPPORT?(this[r]=t>>>24,this[r+1]=t>>>16,this[r+2]=t>>>8,this[r+3]=255&t):L(this,t,r,!1),r+4},u.prototype.writeFloatLE=function(t,r,n){return j(this,t,r,!0,n)},u.prototype.writeFloatBE=function(t,r,n){return j(this,t,r,!1,n)},u.prototype.writeDoubleLE=function(t,r,n){return N(this,t,r,!0,n)},u.prototype.writeDoubleBE=function(t,r,n){return N(this,t,r,!1,n)},u.prototype.copy=function(t,r,n,e){if(n||(n=0),e||0===e||(e=this.length),r>=t.length&&(r=t.length),r||(r=0),e>0&&e<n&&(e=n),e===n)return 0;if(0===t.length||0===this.length)return 0;if(r<0)throw new RangeError("targetStart out of bounds");if(n<0||n>=this.length)throw new RangeError("sourceStart out of bounds");if(e<0)throw new RangeError("sourceEnd out of bounds");e>this.length&&(e=this.length),t.length-r<e-n&&(e=t.length-r+n);var o,i=e-n;if(this===t&&n<r&&r<e)for(o=i-1;o>=0;--o)t[o+r]=this[o+n];else if(i<1e3||!u.TYPED_ARRAY_SUPPORT)for(o=0;o<i;++o)t[o+r]=this[o+n];else Uint8Array.prototype.set.call(t,this.subarray(n,n+i),r);return i},u.prototype.fill=function(t,r,n,e){if("string"==typeof t){if("string"==typeof r?(e=r,r=0,n=this.length):"string"==typeof n&&(e=n,n=this.length),1===t.length){var o=t.charCodeAt(0);o<256&&(t=o)}if(void 0!==e&&"string"!=typeof e)throw new TypeError("encoding must be a string");if("string"==typeof e&&!u.isEncoding(e))throw new TypeError("Unknown encoding: "+e)}else"number"==typeof t&&(t=255&t);if(r<0||this.length<r||this.length<n)throw new RangeError("Out of range index");if(n<=r)return this;r>>>=0,n=void 0===n?this.length:n>>>0,t||(t=0);var i;if("number"==typeof t)for(i=r;i<n;++i)this[i]=t;else{var f=u.isBuffer(t)?t:$(new u(t,e).toString()),s=f.length;for(i=0;i<n-r;++i)this[i+r]=f[i%s]}return this};var rt=/[^+\/0-9A-Za-z-_]/g}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"base64-js":1,ieee754:39,isarray:40}],3:[function(t,r,n){"use strict";r.exports=t("./lib")},{"./lib":5}],4:[function(t,r,n){(function(r){"use strict";function e(t,r){var n=i(t);return null!==n?n:o(t,r)}function o(t,n){if("function"!=typeof n)throw new TypeError("customizer is must be a Function");if("function"==typeof t){var e=String(t);return/^\s*function\s*\S*\([^\)]*\)\s*{\s*\[native code\]\s*}/.test(e)?t:new Function("return "+String(e))()}var o=s.call(t);if("[object Array]"===o)return[];if("[object Object]"===o&&t.constructor===Object)return{};if("[object Date]"===o)return new Date(t.getTime());if("[object RegExp]"===o){var i=String(t),u=i.lastIndexOf("/");return new RegExp(i.slice(1,u),i.slice(u+1))}if((0,f.isBuffer)(t)){var a=new r(t.length);return t.copy(a),a}var c=n(t);return void 0!==c?c:null}function i(t){var r="undefined"==typeof t?"undefined":u(t);return null!==t&&"object"!==r&&"function"!==r?t:null}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};n.__esModule=!0,n.copyValue=n.copyCollection=n.copy=void 0;var f=t("./polyfill"),s=Object.prototype.toString;n.copy=e,n.copyCollection=o,n.copyValue=i}).call(this,t("buffer").Buffer)},{"./polyfill":6,buffer:2}],5:[function(t,r,n){"use strict";function e(t){}function o(t){var r=arguments.length<=1||void 0===arguments[1]?e:arguments[1];if(null===t)return null;var n=(0,f.copyValue)(t);if(null!==n)return n;var o=(0,f.copyCollection)(t,r),u=null!==o?o:t,s=[t],a=[u];return i(t,r,u,s,a)}function i(t,r,n,e,o){if(null===t)return null;var a=(0,f.copyValue)(t);if(null!==a)return a;var c=(0,s.getKeys)(t).concat((0,s.getSymbols)(t)),h=void 0,l=void 0,p=void 0,y=void 0,g=void 0,d=void 0,w=void 0,v=void 0;for(h=0,l=c.length;h<l;++h)p=c[h],y=t[p],g=(0,s.indexOf)(e,y),d=void 0,w=void 0,v=void 0,g===-1?(d=(0,f.copy)(y,r),w=null!==d?d:y,null!==y&&/^(?:function|object)$/.test("undefined"==typeof y?"undefined":u(y))&&(e.push(y),o.push(w))):v=o[g],n[p]=v||i(y,r,w,e,o);return n}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};n.__esModule=!0;var f=t("./copy"),s=t("./polyfill");n.default=o,r.exports=n.default},{"./copy":4,"./polyfill":6}],6:[function(t,r,n){(function(t){"use strict";function r(t,r){if("[object Array]"!==o.call(t))throw new TypeError("array must be an Array");var n=void 0,e=void 0,i=void 0;for(n=0,e=t.length;n<e;++n)if(i=t[n],i===r||i!==i&&r!==r)return n;return-1}var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};n.__esModule=!0;var o=Object.prototype.toString,i="undefined"!=typeof t?function(r){return t.isBuffer(r)}:function(){return!1},u="function"==typeof Object.keys?function(t){return Object.keys(t)}:function(t){var r="undefined"==typeof t?"undefined":e(t);if(null===t||"function"!==r&&"object"!==r)throw new TypeError("obj must be an Object");var n=[],o=void 0;for(o in t)Object.prototype.hasOwnProperty.call(t,o)&&n.push(o);return n},f="function"==typeof Symbol?function(t){return Object.getOwnPropertySymbols(t)}:function(){return[]};n.getKeys=u,n.getSymbols=f,n.indexOf=r,n.isBuffer=i}).call(this,t("buffer").Buffer)},{buffer:2}],7:[function(t,r,n){"use strict";function e(t){var r=2.5949095;return(t*=2)<1?.5*(t*t*((r+1)*t-r)):.5*((t-=2)*t*((r+1)*t+r)+2)}r.exports=e},{}],8:[function(t,r,n){"use strict";function e(t){var r=1.70158;return t*t*((r+1)*t-r)}r.exports=e},{}],9:[function(t,r,n){"use strict";function e(t){var r=1.70158;return--t*t*((r+1)*t+r)+1}r.exports=e},{}],10:[function(t,r,n){"use strict";function e(t){return t<.5?.5*(1-o(1-2*t)):.5*o(2*t-1)+.5}var o=t("./bounce-out");r.exports=e},{"./bounce-out":12}],11:[function(t,r,n){"use strict";function e(t){return 1-o(1-t)}var o=t("./bounce-out");r.exports=e},{"./bounce-out":12}],12:[function(t,r,n){"use strict";function e(t){var r=4/11,n=8/11,e=.9,o=4356/361,i=35442/1805,u=16061/1805,f=t*t;return t<r?7.5625*f:t<n?9.075*f-9.9*t+3.4:t<e?o*f-i*t+u:10.8*t*t-20.52*t+10.72}r.exports=e},{}],13:[function(t,r,n){"use strict";function e(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}r.exports=e},{}],14:[function(t,r,n){"use strict";function e(t){return 1-Math.sqrt(1-t*t)}r.exports=e},{}],15:[function(t,r,n){"use strict";function e(t){return Math.sqrt(1- --t*t)}r.exports=e},{}],16:[function(t,r,n){"use strict";function e(t){return t<.5?4*t*t*t:.5*Math.pow(2*t-2,3)+1}r.exports=e},{}],17:[function(t,r,n){"use strict";function e(t){return t*t*t}r.exports=e},{}],18:[function(t,r,n){"use strict";function e(t){var r=t-1;return r*r*r+1}r.exports=e},{}],19:[function(t,r,n){"use strict";function e(t){return t<.5?.5*Math.sin(13*Math.PI/2*2*t)*Math.pow(2,10*(2*t-1)):.5*Math.sin(-13*Math.PI/2*(2*t-1+1))*Math.pow(2,-10*(2*t-1))+1}r.exports=e},{}],20:[function(t,r,n){"use strict";function e(t){return Math.sin(13*t*Math.PI/2)*Math.pow(2,10*(t-1))}r.exports=e},{}],21:[function(t,r,n){"use strict";function e(t){return Math.sin(-13*(t+1)*Math.PI/2)*Math.pow(2,-10*t)+1}r.exports=e},{}],22:[function(t,r,n){"use strict";function e(t){return 0===t||1===t?t:t<.5?.5*Math.pow(2,20*t-10):-.5*Math.pow(2,10-20*t)+1}r.exports=e},{}],23:[function(t,r,n){"use strict";function e(t){return 0===t?t:Math.pow(2,10*(t-1))}r.exports=e},{}],24:[function(t,r,n){"use strict";function e(t){return 1===t?t:1-Math.pow(2,-10*t)}r.exports=e},{}],25:[function(t,r,n){"use strict";r.exports={backInOut:t("./back-in-out"),backIn:t("./back-in"),backOut:t("./back-out"),bounceInOut:t("./bounce-in-out"),bounceIn:t("./bounce-in"),bounceOut:t("./bounce-out"),circInOut:t("./circ-in-out"),circIn:t("./circ-in"),circOut:t("./circ-out"),cubicInOut:t("./cubic-in-out"),cubicIn:t("./cubic-in"),cubicOut:t("./cubic-out"),elasticInOut:t("./elastic-in-out"),elasticIn:t("./elastic-in"),elasticOut:t("./elastic-out"),expoInOut:t("./expo-in-out"),expoIn:t("./expo-in"),expoOut:t("./expo-out"),linear:t("./linear"),quadInOut:t("./quad-in-out"),quadIn:t("./quad-in"),quadOut:t("./quad-out"),quartInOut:t("./quart-in-out"),quartIn:t("./quart-in"),quartOut:t("./quart-out"),quintInOut:t("./quint-in-out"),quintIn:t("./quint-in"),quintOut:t("./quint-out"),sineInOut:t("./sine-in-out"),sineIn:t("./sine-in"),sineOut:t("./sine-out")}},{"./back-in":8,"./back-in-out":7,"./back-out":9,"./bounce-in":11,"./bounce-in-out":10,"./bounce-out":12,"./circ-in":14,"./circ-in-out":13,"./circ-out":15,"./cubic-in":17,"./cubic-in-out":16,"./cubic-out":18,"./elastic-in":20,"./elastic-in-out":19,"./elastic-out":21,"./expo-in":23,"./expo-in-out":22,"./expo-out":24,"./linear":26,"./quad-in":28,"./quad-in-out":27,"./quad-out":29,"./quart-in":31,"./quart-in-out":30,"./quart-out":32,"./quint-in":34,"./quint-in-out":33,"./quint-out":35,"./sine-in":37,"./sine-in-out":36,"./sine-out":38}],26:[function(t,r,n){"use strict";function e(t){return t}r.exports=e},{}],27:[function(t,r,n){"use strict";function e(t){return t/=.5,t<1?.5*t*t:(t--,-.5*(t*(t-2)-1))}r.exports=e},{}],28:[function(t,r,n){"use strict";function e(t){return t*t}r.exports=e},{}],29:[function(t,r,n){"use strict";function e(t){return-t*(t-2)}r.exports=e},{}],30:[function(t,r,n){"use strict";function e(t){return t<.5?8*Math.pow(t,4):-8*Math.pow(t-1,4)+1}r.exports=e},{}],31:[function(t,r,n){"use strict";function e(t){return Math.pow(t,4)}r.exports=e},{}],32:[function(t,r,n){"use strict";function e(t){return Math.pow(t-1,3)*(1-t)+1}r.exports=e},{}],33:[function(t,r,n){"use strict";function e(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}r.exports=e},{}],34:[function(t,r,n){"use strict";function e(t){return t*t*t*t*t}r.exports=e},{}],35:[function(t,r,n){"use strict";function e(t){return--t*t*t*t*t+1}r.exports=e},{}],36:[function(t,r,n){"use strict";function e(t){return-.5*(Math.cos(Math.PI*t)-1)}r.exports=e},{}],37:[function(t,r,n){"use strict";function e(t){var r=Math.cos(t*Math.PI*.5);return Math.abs(r)<1e-14?1:1-r}r.exports=e},{}],38:[function(t,r,n){"use strict";function e(t){return Math.sin(t*Math.PI/2)}r.exports=e},{}],39:[function(t,r,n){"use strict";n.read=function(t,r,n,e,o){var i,u,f=8*o-e-1,s=(1<<f)-1,a=s>>1,c=-7,h=n?o-1:0,l=n?-1:1,p=t[r+h];for(h+=l,i=p&(1<<-c)-1,p>>=-c,c+=f;c>0;i=256*i+t[r+h],h+=l,c-=8);for(u=i&(1<<-c)-1,i>>=-c,c+=e;c>0;u=256*u+t[r+h],h+=l,c-=8);if(0===i)i=1-a;else{if(i===s)return u?NaN:(p?-1:1)*(1/0);u+=Math.pow(2,e),i-=a}return(p?-1:1)*u*Math.pow(2,i-e)},n.write=function(t,r,n,e,o,i){var u,f,s,a=8*i-o-1,c=(1<<a)-1,h=c>>1,l=23===o?Math.pow(2,-24)-Math.pow(2,-77):0,p=e?0:i-1,y=e?1:-1,g=r<0||0===r&&1/r<0?1:0;for(r=Math.abs(r),isNaN(r)||r===1/0?(f=isNaN(r)?1:0,u=c):(u=Math.floor(Math.log(r)/Math.LN2),r*(s=Math.pow(2,-u))<1&&(u--,s*=2),r+=u+h>=1?l/s:l*Math.pow(2,1-h),r*s>=2&&(u++,s/=2),u+h>=c?(f=0,u=c):u+h>=1?(f=(r*s-1)*Math.pow(2,o),u+=h):(f=r*Math.pow(2,h-1)*Math.pow(2,o),u=0));o>=8;t[n+p]=255&f,p+=y,f/=256,o-=8);for(u=u<<o|f,a+=o;a>0;t[n+p]=255&u,p+=y,u/=256,a-=8);t[n+p-y]|=128*g}},{}],40:[function(t,r,n){"use strict";var e={}.toString;r.exports=Array.isArray||function(t){return"[object Array]"==e.call(t)}},{}],41:[function(t,r,n){"use strict";r.exports=function(t,r){r||(r=[0,""]),t=String(t);var n=parseFloat(t,10);return r[0]=n,r[1]=t.match(/[\d.\-\+]*\s*(.*)/)[1]||"",r}},{}],42:[function(t,r,n){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(n,"__esModule",{value:!0}),n.create=void 0;var o=t("parse-unit"),i=e(o),u=t("deepcopy"),f=e(u),s=t("eases"),a=e(s),c=[],h=function(t){return t.filter(function(t){return t.isActive()})},l=function(){
return(document.scrollingElement||document.documentElement).scrollTop},p=function(){return window.innerHeight||window.outerHeight},y=function(t){return isNaN((0,i.default)(t)[0])!==!0},g=function(t){var r=(0,i.default)(t);return{value:r[0],unit:r[1]}},d=function(t){return null!==String(t).match(/^[a-z]+-[a-z]+$/)},w=function(t,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:l(),e=arguments.length>3&&void 0!==arguments[3]?arguments[3]:p(),o=r.getBoundingClientRect(),i=t.match(/^[a-z]+/)[0],u=t.match(/[a-z]+$/)[0],f=0;return"top"===u&&(f-=0),"middle"===u&&(f-=e/2),"bottom"===u&&(f-=e),"top"===i&&(f+=o.top+n),"middle"===i&&(f+=o.top+n+o.height/2),"bottom"===i&&(f+=o.top+n+o.height),f+"px"},v=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(t=(0,f.default)(t),null==t.from)throw new Error("Missing property `from`");if(null==t.to)throw new Error("Missing property `to`");if(null==t.inside&&(t.inside=function(){}),null==t.outside&&(t.outside=function(){}),"function"!=typeof t.inside)throw new Error("Property `inside` must be a function");if("function"!=typeof t.outside)throw new Error("Property `outside` must be a function");if(null==t.elem){if(y(t.from)===!1)throw new Error("Property `from` must be a absolute value when no `elem` has been provided");if(y(t.to)===!1)throw new Error("Property `to` must be a absolute value when no `elem` has been provided")}else d(t.from)===!0&&(t.from=w(t.from,t.elem)),d(t.to)===!0&&(t.to=w(t.to,t.elem));return t.from=g(t.from),t.to=g(t.to),null==t.props&&(t.props={}),Object.keys(t.props).forEach(function(r){var n=t.props[r];if(y(n.from)===!1)throw new Error("Property `from` of prop must be a absolute value");if(y(n.to)===!1)throw new Error("Property `from` of prop must be a absolute value");if(n.from=g(n.from),n.to=g(n.to),"string"==typeof n.timing&&null==a.default[n.timing])throw new Error("Unknown timing for property `timing` of prop");if(null==n.timing&&(n.timing=a.default.linear),"string"==typeof n.timing&&(n.timing=a.default[n.timing]),n.direct===!0&&null==t.elem)throw new Error("Property `elem` required when `direct` is true");n.direct!==!0&&(n.direct=!1)}),t},b=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l(),n=t.getData(),e=n.to.value-n.from.value,o=r-n.from.value,i=o/(e/100),u=i>=0&&i<=100,f=i<0||i>100;return u===!0&&n.inside(t,i),f===!0&&n.outside(t,i),i<0&&(i=0),i>100&&(i=100),Object.keys(n.props).map(function(t){var r=n.props[t],e=r.direct===!0?n.elem:document.documentElement,o=r.from.unit||r.to.unit,u=r.from.value-r.to.value,f=r.timing(i/100),s=r.from.value-u*f,a=Math.round(100*s)/100;return{elem:e,key:t,value:a+o}})},m=function(t,r){t.style.setProperty(r.key,r.value)},E=function t(r,n){var e=function(){requestAnimationFrame(function(){return t(r,n)})},o=h(c);if(0===o.length)return e();var i=l();if(n===i)return e();n=i;var u=o.map(function(t){return b(t,i)}),f=[].concat.apply([],u);f.forEach(function(t){return m(t.elem,t)}),e()};n.create=function(t){var r=null,n=!1,e=function(){return n},o=function(){return r},i=function(){r=v(t)},u=function(){var t=b(a);return t.forEach(function(t){return m(t)}),t},f=function(){n=!0},s=function(){n=!1},a={isActive:e,getData:o,calculate:i,update:u,start:f,stop:s};return c.push(a),a.calculate(),a};E()},{deepcopy:3,eases:25,"parse-unit":41}]},{},[42])(42)});

Gotowe!

screenshot-2016-11-23-19-05-51

Efekt można zobaczyć tu:

2 komentarze to “Ruchome tło parallax”

You can leave a reply or Trackback this post.
    • No właśnie…. ja stawiam bardziej na szybkość działania stron, bo czym więcej efektów, skryptów, tym strona jest obciążona i dłużej się ładuje, a to nie jest dobre i dla robotów sieciowych i dla klientów odwiedzających stronę.

Write a Reply or Comment

Your email address will not be published.