UNPKG

8.24 kBJavaScriptView Raw
1/*! Snowflakes | © 2018 Denis Seleznev | MIT License | https://github.com/hcodes/snowflakes/ */
2!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Snowflakes=t()}(this,function(){"use strict";function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function e(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,a=!1,o=void 0;try{for(var r,s=e[Symbol.iterator]();!(i=(r=s.next()).done)&&(n.push(r.value),!t||n.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==s.return||s.return()}finally{if(a)throw o}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var a="";function m(n,i){Object.keys(i).forEach(function(e){var t=e;a&&-1<e.search("animation")&&(t=a+e[0].toUpperCase()+e.substr(1)),n.style[t]=i[e]})}function d(e,t){return e+Math.floor(Math.random()*(t-e))}function c(e,t,n,i,a){return i+(a-i)*(e-t)/(n-t)}"undefined"!=typeof window&&(a=-1<Array.prototype.slice.call(window.getComputedStyle(document.documentElement,"")).join(",").search(/,animation/)?"":"Webkit");var t,n,o,s=function(){function l(e,t,n){f(this,l);var i=n.minSize===n.maxSize;this.innerSize=i?0:d(0,l.maxInnerSize),this.size=l.calcSize(this.innerSize,n);var a=document.createElement("div"),o=document.createElement("div"),r=this.getAnimationProps(t,n),s={animationDelay:r.animationDelay,animationDuration:r.animationDuration,left:99*Math.random()+"%",marginTop:-Math.sqrt(2)*this.size+"px",width:this.size+"px",height:this.size+"px"};i||(s.zIndex=n.zIndex+10*this.size,s.opacity=c(this.size,n.minSize,n.maxSize,n.minOpacity,n.maxOpacity)),m(a,s),m(o,{animationName:"snowflake_x_"+this.innerSize,animationDelay:Math.random()+"s"}),a.classList.add("snowflake"),o.classList.add("snowflake__inner"),n.types&&o.classList.add("snowflake__inner_type_"+d(0,n.types)),n.wind&&o.classList.add("snowflake__inner_wind"),n.rotation&&o.classList.add("snowflake__inner_rotation"+(.5<Math.random()?"":"_reverse")),a.appendChild(o),this._elem=a,e.appendChild(a)}return e(l,[{key:"getAnimationProps",value:function(e,t){var n=e/50/t.speed,i=n/3;return{animationDelay:Math.random()*n+"s",animationDuration:c(this.size,t.minSize,t.maxSize,n,i)+"s"}}},{key:"resize",value:function(e,t){var n=this.getAnimationProps(e,t);m(this._elem,n)}},{key:"destroy",value:function(){delete this._elem}}],[{key:"calcSize",value:function(e,t){return Math.floor(c(e,0,l.maxInnerSize,t.minSize,t.maxSize))}}]),l}();o=20,(n="maxInnerSize")in(t=s)?Object.defineProperty(t,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[n]=o;var l=function(){function a(e){var n=this;f(this,a),this.params=this._setParams(e),this._flakes=[],this._isBody=this.params.container===document.body;var i=this._container=document.createElement("div");i.classList.add("snowflakes"),this._isBody&&i.classList.add("snowflakes_body"),m(i,{zIndex:this.params.zIndex}),this.params.container.appendChild(i),this.params.stop&&this.stop(),a._mainStyleNode||(a._mainStyleNode=this._injectStyle(".snowflakes_paused .snowflake,.snowflakes_paused .snowflake__inner,.snowflakes_paused .snowflake__inner:before{-webkit-animation-play-state:paused;animation-play-state:paused}.snowflakes_body{position:fixed;left:0;top:0;width:100%}.snowflake{position:absolute;-webkit-animation:snowflake_y 10s infinite linear;animation:snowflake_y 10s infinite linear;will-change:transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.snowflake__inner{position:absolute;left:0;right:0;top:0;bottom:0}.snowflake__inner:before{position:absolute;left:0;right:0;top:0;bottom:0;content:'';background-size:100% 100%}.snowflake__inner_wind{-webkit-animation:snowflake_x_8 1s infinite alternate ease-in-out;animation:snowflake_x_8 1s infinite alternate ease-in-out}.snowflake__inner_rotation:before{-webkit-animation:snowflake_rotation 2s infinite linear;animation:snowflake_rotation 2s infinite linear}.snowflake__inner_rotation_reverse:before{-webkit-animation:snowflake_rotation_reverse 2s infinite linear;animation:snowflake_rotation_reverse 2s infinite linear}@-webkit-keyframes snowflake_rotation{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes snowflake_rotation{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes snowflake_rotation_reverse{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes snowflake_rotation_reverse{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}"),a._count=(a._count||0)+1),this._winHeight=this._getWindowHeight(),this._onResize=function(){n._winHeight=n._getWindowHeight();var t=n._height();m(i,{display:"none"}),n._flakes.forEach(function(e){return e.resize(t,n.params)}),n._updateAnimationStyle(),m(i,{display:"block"})},this._animationStyleNode=this._injectStyle(this._getAnimationStyle()),window.addEventListener("resize",this._onResize,!1);for(var t=0;t<this.params.count;t++)this._flakes.push(new s(i,this._height(),this.params))}return e(a,[{key:"destroy",value:function(){this._removeStyle(),this._container&&this._container.parentNode.removeChild(this._container),delete this._container,window.removeEventListener("resize",this._onResize,!1),this._flakes.forEach(function(e){return e.destroy()}),delete this._flakes,delete this.params}},{key:"start",value:function(){this._container.classList.remove("snowflakes_paused")}},{key:"stop",value:function(){this._container.classList.add("snowflakes_paused")}},{key:"_setParams",value:function(a){a=a||{};var o={};return[["color","#5ECDEF"],["container",document.body],["count",50],["speed",1],["stop",!1],["rotation",!0],["minOpacity",.6],["maxOpacity",1],["minSize",8],["maxSize",18],["types",6],["width"],["height"],["wind",!0],["zIndex",9999]].forEach(function(e){var t=r(e,2),n=t[0],i=t[1];o[n]="boolean"==typeof i?n in a?a[n]:i:a[n]||i}),o}},{key:"_getAnimationStyle",value:function(){for(var e=this._height()+this.params.maxSize+"px",t="@-webkit-keyframes snowflake_y{from{-webkit-transform:translateY(0px)}to{-webkit-transform:translateY(".concat(e,");}}\n@keyframes snowflake_y{from{transform:translateY(0px)}to{transform:translateY(").concat(e,")}}"),n=0;n<=s.maxInnerSize;n++){var i=4*(s.calcSize(n,this.params)-this.params.minSize)+"px";t+="@-webkit-keyframes snowflake_x_".concat(n,"{from{-webkit-transform:translateX(0px)}to{-webkit-transform:translateX(").concat(i,");}}\n@keyframes snowflake_x_").concat(n,"{from{transform:translateX(0px)}to{transform:translateX(").concat(i,")}}")}return t}},{key:"_updateAnimationStyle",value:function(){this._injectStyle(this._getAnimationStyle(),this._animationStyleNode)}},{key:"_injectStyle",value:function(e,t){return t||(t=document.createElement("style"),document.body.appendChild(t)),t.styleSheet?t.styleSheet.cssText=e:"textContent"in t?t.textContent=e:t.innerHTML=e,t}},{key:"_removeStyle",value:function(){--a._count<=0&&(a._count=0,a._mainStyleNode&&(a._mainStyleNode.parentNode.removeChild(a._mainStyleNode),delete a._mainStyleNode)),this._animationStyleNode&&(this._animationStyleNode.parentNode.removeChild(this._animationStyleNode),delete this._animationStyleNode),this._imagesStyleNode&&(this._imagesStyleNode.parentNode.removeChild(this._imagesStyleNode),delete this._imagesStyleNode)}},{key:"_height",value:function(){return this.params.height||(this._isBody?this._winHeight:this.params.container.offsetHeight+this.params.maxSize)}},{key:"_getWindowHeight",value:function(){var e,t=document.body,n=document.documentElement;return window.innerHeight?e=window.innerHeight:n&&n.clientHeight?e=n.clientHeight:t&&(e=t.clientHeight),e}}]),a}();return function(e){return new l(e)}});
\No newline at end of file