UNPKG

magic-snowflakes

Version:
2 lines 7.43 kB
/*! Snowflakes | © 2018 Denis Seleznev | MIT License | https://github.com/hcodes/snowflakes/ */ !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";var e="";"undefined"!=typeof window&&(e=Array.prototype.slice.call(window.getComputedStyle(document.documentElement,"")).join(",").search(/,animation/)>-1?"":"Webkit");function t(t,n){Object.keys(n).forEach(function(i){var o=i;e&&i.search("animation")>-1&&(o=e+i[0].toUpperCase()+i.substr(1)),t.style[o]=n[i]})}function n(e,t){return e+Math.floor(Math.random()*(t-e))}function i(e,t,n,i,o){return i+(o-i)*(e-t)/(n-t)}var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(){function e(a,s,r){o(this,e);var m=r.minSize===r.maxSize;this.innerSize=m?0:n(0,e.maxInnerSize),this.size=e.calcSize(this.innerSize,r);var l=document.createElement("div"),f=document.createElement("div"),d=this.getAnimationProps(s,r),h={animationDelay:d.animationDelay,animationDuration:d.animationDuration,left:99*Math.random()+"%",marginTop:-Math.sqrt(2)*this.size+"px",width:this.size+"px",height:this.size+"px"};m||(h.zIndex=r.zIndex+10*this.size,h.opacity=i(this.size,r.minSize,r.maxSize,r.minOpacity,r.maxOpacity)),t(l,h),t(f,{animationName:"snowflake_x_"+this.innerSize,animationDelay:Math.random()+"s"}),l.classList.add("snowflake"),f.classList.add("snowflake__inner"),r.types&&f.classList.add("snowflake__inner_type_"+n(0,r.types)),r.wind&&f.classList.add("snowflake__inner_wind"),r.rotation&&f.classList.add("snowflake__inner_rotation"+(Math.random()>.5?"":"_reverse")),l.appendChild(f),this._elem=l,a.appendChild(l)}return e.calcSize=function(t,n){return Math.floor(i(t,0,e.maxInnerSize,n.minSize,n.maxSize))},e.prototype.getAnimationProps=function(e,t){var n=e/50/t.speed,o=n/3;return{animationDelay:Math.random()*n+"s",animationDuration:i(this.size,t.minSize,t.maxSize,n,o)+"s"}},e.prototype.resize=function(e,n){var i=this.getAnimationProps(e,n);t(this._elem,i)},e.prototype.destroy=function(){delete this._elem},e}();a.maxInnerSize=20;var s=".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}.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)}}",r="",m=function(){function e(n){var i=this;o(this,e),this.params=this._setParams(n),this._flakes=[],this._isBody=this.params.container===document.body;var m=this._container=document.createElement("div");m.classList.add("snowflakes"),this._isBody&&m.classList.add("snowflakes_body"),t(m,{zIndex:this.params.zIndex}),this.params.container.appendChild(m),this.params.stop&&this.stop(),e._mainStyleNode||(e._mainStyleNode=this._injectStyle(s),e._count=(e._count||0)+1),this._winHeight=this._getWindowHeight(),this._onResize=function(){i._winHeight=i._getWindowHeight();var e=i._height();t(m,{display:"none"});i._flakes.forEach(function(t){return t.resize(e,i.params)}),i._updateAnimationStyle(),t(m,{display:"block"})},r&&(this._imagesStyleNode=this._injectStyle(r.replace(/%7Bcolor%7D/g,encodeURIComponent(this.params.color)))),this._animationStyleNode=this._injectStyle(this._getAnimationStyle()),window.addEventListener("resize",this._onResize,!1);for(var l=0;l<this.params.count;l++)this._flakes.push(new a(m,this._height(),this.params))}return e.prototype.destroy=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},e.prototype.start=function(){this._container.classList.remove("snowflakes_paused")},e.prototype.stop=function(){this._container.classList.add("snowflakes_paused")},e.prototype._setParams=function(e){e=e||{};var t={};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(n){var i=n[0],o=n[1];t[i]="boolean"==typeof o?i in e?e[i]:o:e[i]||o}),t},e.prototype._getAnimationStyle=function(){for(var e=this._height()+this.params.maxSize+"px",t="@-webkit-keyframes snowflake_y{from{-webkit-transform:translateY(0px)}to{-webkit-transform:translateY("+e+");}}\n@keyframes snowflake_y{from{transform:translateY(0px)}to{transform:translateY("+e+")}}",n=0;n<=a.maxInnerSize;n++){var i=4*(a.calcSize(n,this.params)-this.params.minSize)+"px";t+="@-webkit-keyframes snowflake_x_"+n+"{from{-webkit-transform:translateX(0px)}to{-webkit-transform:translateX("+i+");}}\n@keyframes snowflake_x_"+n+"{from{transform:translateX(0px)}to{transform:translateX("+i+")}}"}return t},e.prototype._updateAnimationStyle=function(){this._injectStyle(this._getAnimationStyle(),this._animationStyleNode)},e.prototype._injectStyle=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},e.prototype._removeStyle=function(){e._count--,e._count<=0&&(e._count=0,e._mainStyleNode&&(e._mainStyleNode.parentNode.removeChild(e._mainStyleNode),delete e._mainStyleNode)),this._animationStyleNode&&(this._animationStyleNode.parentNode.removeChild(this._animationStyleNode),delete this._animationStyleNode),this._imagesStyleNode&&(this._imagesStyleNode.parentNode.removeChild(this._imagesStyleNode),delete this._imagesStyleNode)},e.prototype._height=function(){return this.params.height||(this._isBody?this._winHeight:this.params.container.offsetHeight+this.params.maxSize)},e.prototype._getWindowHeight=function(){var e=document.body,t=document.documentElement,n=void 0;return window.innerHeight?n=window.innerHeight:t&&t.clientHeight?n=t.clientHeight:e&&(n=e.clientHeight),n},e}();return function(e){return new m(e)}});