UNPKG

35.1 kBJavaScriptView Raw
1/*! Snowflakes | © 2018 Denis Seleznev | MIT License | https://github.com/hcodes/snowflakes/ */
2(function (global, factory) {
3 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
4 typeof define === 'function' && define.amd ? define(factory) :
5 (global.Snowflakes = factory());
6}(this, (function () { 'use strict';
7
8function _classCallCheck(instance, Constructor) {
9 if (!(instance instanceof Constructor)) {
10 throw new TypeError("Cannot call a class as a function");
11 }
12}
13
14function _defineProperties(target, props) {
15 for (var i = 0; i < props.length; i++) {
16 var descriptor = props[i];
17 descriptor.enumerable = descriptor.enumerable || false;
18 descriptor.configurable = true;
19 if ("value" in descriptor) descriptor.writable = true;
20 Object.defineProperty(target, descriptor.key, descriptor);
21 }
22}
23
24function _createClass(Constructor, protoProps, staticProps) {
25 if (protoProps) _defineProperties(Constructor.prototype, protoProps);
26 if (staticProps) _defineProperties(Constructor, staticProps);
27 return Constructor;
28}
29
30function _defineProperty(obj, key, value) {
31 if (key in obj) {
32 Object.defineProperty(obj, key, {
33 value: value,
34 enumerable: true,
35 configurable: true,
36 writable: true
37 });
38 } else {
39 obj[key] = value;
40 }
41
42 return obj;
43}
44
45function _slicedToArray(arr, i) {
46 return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
47}
48
49function _arrayWithHoles(arr) {
50 if (Array.isArray(arr)) return arr;
51}
52
53function _iterableToArrayLimit(arr, i) {
54 var _arr = [];
55 var _n = true;
56 var _d = false;
57 var _e = undefined;
58
59 try {
60 for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
61 _arr.push(_s.value);
62
63 if (i && _arr.length === i) break;
64 }
65 } catch (err) {
66 _d = true;
67 _e = err;
68 } finally {
69 try {
70 if (!_n && _i["return"] != null) _i["return"]();
71 } finally {
72 if (_d) throw _e;
73 }
74 }
75
76 return _arr;
77}
78
79function _nonIterableRest() {
80 throw new TypeError("Invalid attempt to destructure non-iterable instance");
81}
82
83var animationPrefix = '';
84
85if (typeof window !== 'undefined') {
86 animationPrefix = Array.prototype.slice.call(window.getComputedStyle(document.documentElement, '')).join(',').search(/,animation/) > -1 ? '' : 'Webkit';
87}
88/**
89 * Set inline style.
90 *
91 * @param {DOMElement} dom
92 * @param {Object} props
93 */
94
95
96function setStyle(dom, props) {
97 Object.keys(props).forEach(function (originalKey) {
98 var key = originalKey;
99
100 if (animationPrefix && originalKey.search('animation') > -1) {
101 key = animationPrefix + originalKey[0].toUpperCase() + originalKey.substr(1);
102 }
103
104 dom.style[key] = props[originalKey];
105 });
106}
107/**
108 * Show DOM element.
109 *
110 * @param {DOMElement} dom
111 */
112
113function showElement(dom) {
114 setStyle(dom, {
115 display: 'block'
116 });
117}
118/**
119 * Hide DOM element.
120 *
121 * @param {DOMElement} dom
122 */
123
124function hideElement(dom) {
125 setStyle(dom, {
126 display: 'none'
127 });
128}
129/**
130 * Get random number.
131 *
132 * @param {number} from
133 * @param {number} max
134 *
135 * @returns {number}
136 */
137
138function getRandom(from, max) {
139 return from + Math.floor(Math.random() * (max - from));
140}
141/**
142 * Linear interpolation.
143 *
144 * @param {number} x
145 * @param {number} x1
146 * @param {number} x2
147 * @param {number} y1
148 * @param {number} y2
149 *
150 * @returns {number}
151 */
152
153function interpolation(x, x1, x2, y1, y2) {
154 return y1 + (y2 - y1) * (x - x1) / (x2 - x1);
155}
156
157var Flake =
158/*#__PURE__*/
159function () {
160 /**
161 * @constructor
162 *
163 * @param {DOMElement} container
164 * @param {number} containerHeight
165 * @param {Object} params
166 * @param {number} [params.count]
167 * @param {number} [params.speed]
168 * @param {boolean} [params.rotation]
169 * @param {number} [params.minOpacity]
170 * @param {number} [params.maxOpacity]
171 * @param {number} [params.minSize]
172 * @param {number} [params.maxSize]
173 * @param {number} [params.types]
174 * @param {number} [params.wind]
175 * @param {number} [params.zIndex]
176 */
177 function Flake(container, containerHeight, params) {
178 _classCallCheck(this, Flake);
179
180 var isEqual = params.minSize === params.maxSize;
181 this.innerSize = isEqual ? 0 : getRandom(0, Flake.maxInnerSize);
182 this.size = Flake.calcSize(this.innerSize, params);
183 var flake = document.createElement('div'),
184 innerFlake = document.createElement('div'),
185 animationProps = this.getAnimationProps(containerHeight, params),
186 styleProps = {
187 animationDelay: animationProps.animationDelay,
188 animationDuration: animationProps.animationDuration,
189 left: Math.random() * 99 + '%',
190 marginTop: -Math.sqrt(2) * this.size + 'px',
191 width: this.size + 'px',
192 height: this.size + 'px'
193 };
194
195 if (!isEqual) {
196 styleProps.zIndex = params.zIndex + this.size * 10;
197 styleProps.opacity = interpolation(this.size, params.minSize, params.maxSize, params.minOpacity, params.maxOpacity);
198 }
199
200 setStyle(flake, styleProps);
201 setStyle(innerFlake, {
202 animationName: 'snowflake_x_' + this.innerSize,
203 animationDelay: Math.random() + 's'
204 });
205 flake.classList.add('snowflake');
206 innerFlake.classList.add('snowflake__inner');
207
208 if (params.types) {
209 innerFlake.classList.add('snowflake__inner_type_' + getRandom(0, params.types));
210 }
211
212 if (params.wind) {
213 innerFlake.classList.add('snowflake__inner_wind');
214 }
215
216 if (params.rotation) {
217 innerFlake.classList.add('snowflake__inner_rotation' + (Math.random() > 0.5 ? '' : '_reverse'));
218 }
219
220 flake.appendChild(innerFlake);
221 this._elem = flake;
222 container.appendChild(flake);
223 }
224 /**
225 * Calc size.
226 *
227 * @param {number} innerSize
228 * @param {Object} params
229 *
230 * @returns {number}
231 */
232
233
234 _createClass(Flake, [{
235 key: "getAnimationProps",
236
237 /**
238 * Get animation properties.
239 *
240 * @param {number} containerHeight
241 * @param {Object} params
242 *
243 * @returns {Object}
244 */
245 value: function getAnimationProps(containerHeight, params) {
246 var speedMax = containerHeight / 50 / params.speed,
247 speedMin = speedMax / 3;
248 return {
249 animationDelay: Math.random() * speedMax + 's',
250 animationDuration: interpolation(this.size, params.minSize, params.maxSize, speedMax, speedMin) + 's'
251 };
252 }
253 /**
254 * Resize a flake.
255 *
256 * @param {number} containerHeight
257 * @param {Object} params
258 */
259
260 }, {
261 key: "resize",
262 value: function resize(containerHeight, params) {
263 var props = this.getAnimationProps(containerHeight, params);
264 setStyle(this._elem, props);
265 }
266 /**
267 * Destroy a flake.
268 */
269
270 }, {
271 key: "destroy",
272 value: function destroy() {
273 delete this._elem;
274 }
275 }], [{
276 key: "calcSize",
277 value: function calcSize(innerSize, params) {
278 return Math.floor(interpolation(innerSize, 0, Flake.maxInnerSize, params.minSize, params.maxSize));
279 }
280 }]);
281
282 return Flake;
283}();
284
285_defineProperty(Flake, "maxInnerSize", 20);
286
287var mainStyle = '.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)}}';
288var imagesStyle = '.snowflake__inner_type_0:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236.283%22%20height%3D%2236.283%22%3E%3Cpath%20d%3D%22M35.531%2017.391h-3.09l.845-1.464a.748.748%200%201%200-1.297-.75l-1.276%202.214H28.61l2.515-4.354a.751.751%200%200%200-.272-1.024.75.75%200%200%200-1.024.274l-2.948%205.104h-2.023a6.751%206.751%200%200%200-2.713-4.684l1.019-1.76%205.896-.002a.75.75%200%200%200%200-1.5l-5.029.002%201.051-1.82%202.557.002a.75.75%200%200%200%200-1.5l-1.689-.002%201.545-2.676a.75.75%200%201%200-1.302-.75l-1.547%202.676-.844-1.463a.749.749%200%201%200-1.297.75l1.278%202.213-1.051%201.818-2.514-4.354a.75.75%200%200%200-1.298.75l2.946%205.104-1.016%201.758a6.692%206.692%200%200%200-2.706-.57%206.74%206.74%200%200%200-2.707.568l-1.013-1.754%202.946-5.105a.75.75%200%200%200-1.298-.75L13.56%208.697l-1.05-1.818%201.278-2.217a.749.749%200%200%200-1.298-.75l-.845%201.465-1.551-2.678a.75.75%200%200%200-1.024-.273.748.748%200%200%200-.274%201.023l1.545%202.678H8.652a.75.75%200%200%200%200%201.5h2.556l1.05%201.818H7.231a.75.75%200%200%200%200%201.5h5.894l1.017%201.762a6.755%206.755%200%200%200-2.712%204.684H9.406l-2.95-5.104a.75.75%200%201%200-1.299.75l2.516%204.354H5.569l-1.277-2.213a.75.75%200%200%200-1.298.75l.845%201.463H.75a.75.75%200%200%200%200%201.5h3.09l-.845%201.465a.747.747%200%200%200%20.275%201.022.75.75%200%200%200%20.374.103.75.75%200%200%200%20.65-.375l1.277-2.215h2.103l-2.516%204.354a.75.75%200%200%200%201.299.75l2.949-5.104h2.024a6.761%206.761%200%200%200%202.712%204.685l-1.017%201.762H7.232a.75.75%200%200%200%200%201.5h5.026l-1.05%201.818H8.651a.75.75%200%200%200%200%201.5h1.69l-1.545%202.676a.75.75%200%200%200%201.299.75l1.546-2.676.846%201.465a.755.755%200%200%200%20.65.375.737.737%200%200%200%20.375-.103.747.747%200%200%200%20.274-1.022l-1.279-2.215%201.05-1.82%202.515%204.354a.75.75%200%200%200%201.299-.75l-2.947-5.104%201.013-1.756a6.72%206.72%200%200%200%205.415%200l1.014%201.756-2.947%205.104a.75.75%200%200%200%201.298.75l2.515-4.354%201.053%201.82-1.277%202.213a.75.75%200%200%200%201.298.75l.844-1.463%201.545%202.678c.141.24.393.375.65.375a.75.75%200%200%200%20.649-1.125l-1.548-2.678h1.689a.75.75%200%200%200%200-1.5h-2.557l-1.051-1.82%205.029.002a.75.75%200%200%200%200-1.5l-5.896-.002-1.019-1.76a6.75%206.75%200%200%200%202.711-4.685h2.023l2.947%205.104a.753.753%200%200%200%201.025.273.749.749%200%200%200%20.272-1.023l-2.515-4.354h2.104l1.279%202.215a.75.75%200%200%200%20.649.375c.127%200%20.256-.03.375-.103a.748.748%200%200%200%20.273-1.022l-.848-1.465h3.092a.75.75%200%200%200%20.003-1.5zm-12.136.75c0%20.257-.041.502-.076.75a5.223%205.223%200%200%201-1.943%203.358%205.242%205.242%200%200%201-1.291.766%205.224%205.224%200%200%201-1.949.384%205.157%205.157%200%200%201-3.239-1.15%205.22%205.22%200%200%201-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22%205.22%200%200%201%201.944-3.359c.393-.312.82-.576%201.291-.765a5.219%205.219%200%200%201%201.948-.384c.69%200%201.344.142%201.948.384.471.188.898.454%201.291.765a5.222%205.222%200%200%201%201.943%203.359c.035.247.076.493.076.75z%22%20fill%3D%22%7Bcolor%7D%22%2F%3E%3C%2Fsvg%3E%0A")}.snowflake__inner_type_1:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232.813%22%20height%3D%2232.813%22%3E%3Cpath%20d%3D%22M29.106%2024.424a.781.781%200%200%201-.781.781h-3.119v3.119a.782.782%200%200%201-1.562%200v-4.682h4.682c.43.001.78.351.78.782zM4.673%209.352h4.682V4.671a.781.781%200%200%200-1.563%200V7.79H4.673a.781.781%200%200%200%200%201.562zM3.708%2024.24c0%20.431.35.781.781.781H7.61v3.12a.78.78%200%201%200%201.562%200v-4.683H4.489a.782.782%200%200%200-.781.782zM28.923%208.39a.78.78%200%200%200-.781-.781h-3.121V4.488a.781.781%200%200%200-1.562%200v4.684h4.684a.783.783%200%200%200%20.78-.782zm3.889%208.017c0%20.431-.35.781-.781.781h-3.426l1.876%201.873a.784.784%200%200%201%200%201.107.791.791%200%200%201-.554.228.773.773%200%200%201-.55-.228l-2.979-2.98h-2.995a6.995%206.995%200%200%201-1.728%203.875h5.609a.781.781%200%200%201%200%201.562h-4.666v4.667a.782.782%200%200%201-1.562%200v-5.61a7%207%200%200%201-3.866%201.719v2.995l2.978%202.98c.306.305.306.8%200%201.104a.78.78%200%200%201-1.104%200l-1.874-1.876v3.427a.781.781%200%200%201-1.562%200v-3.427l-1.875%201.876a.78.78%200%201%201-1.105-1.104l2.979-2.98v-2.995a7.016%207.016%200%200%201-3.865-1.717v5.608a.781.781%200%200%201-1.562%200v-4.667H5.535a.781.781%200%200%201%200-1.562h5.607a7.022%207.022%200%200%201-1.728-3.875H6.417l-2.979%202.979a.784.784%200%200%201-1.104%200%20.781.781%200%200%201%200-1.106l1.874-1.873H.782a.78.78%200%201%201-.001-1.563h3.426L2.333%2013.75a.783.783%200%200%201%201.105-1.106l2.979%202.979h2.995a6.996%206.996%200%200%201%201.72-3.866H5.533a.781.781%200%200%201%200-1.562h4.666V5.528a.781.781%200%200%201%201.562%200v5.599a6.995%206.995%200%200%201%203.865-1.717V6.415l-2.978-2.979a.782.782%200%200%201%201.105-1.105l1.874%201.875V.781a.78.78%200%201%201%201.562%200v3.426l1.875-1.875a.777.777%200%200%201%201.104%200%20.78.78%200%200%201%200%201.105l-2.978%202.98v2.996a7.021%207.021%200%200%201%203.866%201.718V5.532a.78.78%200%201%201%201.562%200v4.666h4.666a.78.78%200%201%201%200%201.562h-5.599a7%207%200%200%201%201.718%203.866h2.995l2.979-2.979a.783.783%200%200%201%201.106%201.106l-1.876%201.874h3.427a.777.777%200%200%201%20.778.78zm-11.006-.782a5.457%205.457%200%200%200-4.618-4.617c-.257-.037-.514-.079-.781-.079-.268%200-.524.042-.781.079a5.458%205.458%200%200%200-4.618%204.617c-.038.257-.079.514-.079.781s.041.522.079.781a5.455%205.455%200%200%200%204.618%204.616c.257.036.514.079.781.079s.524-.043.781-.079a5.457%205.457%200%200%200%204.618-4.616c.037-.259.079-.515.079-.781s-.043-.524-.079-.781z%22%20fill%3D%22%7Bcolor%7D%22%2F%3E%3C%2Fsvg%3E")}.snowflake__inner_type_2:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2235.79%22%20height%3D%2235.79%22%3E%3Cpath%20d%3D%22M7.161%2022.223l.026-.047.865.5-.026.047a.503.503%200%200%201-.434.25c-.019%200-.034-.013-.053-.016l-.355-.205a.493.493%200%200%201-.023-.529zM9.969%208.988l2.785.001%201.393-2.414a.502.502%200%200%200-.869-.499l-1.103%201.913-2.208-.001a.5.5%200%201%200%20.002%201zm15.854%2017.813h-2.785l-1.393%202.411a.499.499%200%200%200%20.436.75c.172%200%20.34-.09.434-.25l1.104-1.911h2.207c.274%200%20.5-.224.5-.5a.505.505%200%200%200-.503-.5zM23.038%208.99h2.785a.5.5%200%200%200%200-1h-2.207l-1.105-1.913a.5.5%200%200%200-.868.5l1.395%202.413zM12.754%2026.801H9.967a.5.5%200%200%200%200%201h2.209l1.105%201.912a.496.496%200%200%200%20.682.184.5.5%200%200%200%20.184-.684l-1.393-2.412zm-7.218-6.309a.502.502%200%200%200%20.685-.184l1.391-2.413-1.394-2.413a.5.5%200%200%200-.867.5l1.104%201.913-1.104%201.913a.5.5%200%200%200%20.185.684zM30.254%2015.3a.505.505%200%200%200-.685.183l-1.392%202.412%201.395%202.414a.501.501%200%200%200%20.867-.5l-1.104-1.914%201.104-1.912a.5.5%200%200%200-.185-.683zm3.138%2011.542a.501.501%200%200%201-.683.184l-.98-.565-2.137%201.231a.516.516%200%200%201-.5%200l-2.385-1.377a.502.502%200%200%201-.25-.433v-.854h-4.441l-2.225%203.852.736.428c.154.088.25.254.25.432l.001%202.755a.5.5%200%200%201-.25.433l-2.133%201.229v1.136c0%20.274-.225.5-.5.5s-.5-.226-.5-.5v-1.136l-2.136-1.23a.5.5%200%200%201-.25-.433l.001-2.755c0-.178.096-.344.25-.432l.738-.427-2.224-3.849H9.332l.002.851a.505.505%200%200%201-.25.435l-2.387%201.377a.5.5%200%200%201-.5%200L4.06%2026.46l-.982.567a.5.5%200%200%201-.5-.867l.982-.567.001-2.465c0-.179.097-.344.25-.434l2.388-1.377a.497.497%200%200%201%20.5%200l.736.426%202.221-3.848-2.222-3.849-.737.426a.51.51%200%200%201-.5%200l-2.386-1.377a.5.5%200%200%201-.25-.434l.002-2.464-.983-.567a.501.501%200%200%201-.184-.683.502.502%200%200%201%20.684-.183l.983.568%202.134-1.233a.5.5%200%200%201%20.5%200l2.385%201.379c.156.089.25.255.25.433v.85h4.443l2.223-3.846-.74-.427a.501.501%200%200%201-.25-.434l.002-2.755c0-.178.096-.343.25-.433l2.135-1.233V.5a.5.5%200%200%201%201%200v1.135l2.134%201.231c.154.089.25.254.25.434l-.002%202.755a.503.503%200%200%201-.25.433l-.733.425%202.224%203.849h4.44l-.002-.851c0-.179.096-.344.25-.434l2.388-1.378a.502.502%200%200%201%20.5%200l2.136%201.233.982-.568a.5.5%200%201%201%20.5.866l-.983.568v2.464a.503.503%200%200%201-.25.433l-2.388%201.378a.5.5%200%200%201-.5%200l-.735-.426-2.222%203.849%202.223%203.849.734-.425a.506.506%200%200%201%20.5%200l2.389%201.375c.154.09.25.255.25.435l-.002%202.462.982.568c.24.137.321.444.182.682zm-2.165-1.828l.001-1.597-1.888-1.087-.734.424-.348.201-.301.173-.5.289v2.179l1.885%201.088%201.386-.802.498-.286.001-.582zm-3.736-11.467l-.531-.307-2.283%201.318-2.443%203.337%202.442%203.337%202.283%201.316.531-.306-2.514-4.348%202.515-4.347zm-7.712%2016.478l-.762-.438-.339-.194-.283-.166-.5-.289-.5.289-.279.162-.349.2-.757.437-.001%202.177%201.386.797.501.289.499-.287%201.386-.798-.002-2.179zM16.008%205.767l.736.425.371.214.279.16.5.288.5-.289.281-.163.367-.212.732-.424.002-2.178-1.381-.797-.502-.289-.498.287-1.385.8-.002%202.178zm6.52%2014.227l-1.535-2.099%201.535-2.098.732-1-1.232.134-2.585.281-1.048-2.379-.5-1.133-.5%201.134-1.049%202.379-2.585-.281-1.232-.134.732%201%201.536%202.097-1.536%202.098-.732%201%201.232-.134%202.585-.281%201.049%202.379.5%201.134.5-1.134%201.048-2.379%202.585.281%201.232.134-.732-.999zm8.2-10.084l-1.386-.8-1.887%201.089v1.279l.002.32v.577l.5.289.28.163.367.213.732.424%201.888-1.089v-2.178l-.496-.287zM18.927%207.413l-.532.307v2.637l1.667%203.784%204.111-.447%202.283-1.317-.002-.613h-5.02l-2.507-4.351zm-9.594%204.348v.614l2.283%201.318%204.111.447%201.668-3.785V7.719l-.531-.306-2.509%204.347-5.022.001zm-2.15%201.279l.37-.213.279-.162.5-.289V10.2L6.446%209.11l-1.384.8-.499.289v.578l-.002%201.599%201.885%201.088.737-.424zm1.119%209.205l.53.306%202.281-1.316%202.443-3.339-2.442-3.337-2.281-1.317-.531.307%202.511%204.348-2.511%204.348zm-1.115-.069l-.026.047a.493.493%200%200%200%20.023.529l-.734-.424-1.887%201.089-.001%201.599v.578l.5.288%201.386.8%201.887-1.088v-1.278l-.002-.321v-.577l-.5-.289-.293-.169c.02.002.035.017.055.017a.5.5%200%200%200%20.433-.25l.026-.047-.867-.504zm9.679%206.202l.529-.306v-2.637l-1.668-3.785-4.111.447-2.283%201.316.002.611%205.021.002%202.51%204.352zm9.591-4.349v-.612L24.174%2022.1l-4.111-.447-1.667%203.783v2.639l.531.307%202.512-4.352h5.018v-.001z%22%20fill%3D%22%7Bcolor%7D%22%2F%3E%3C%2Fsvg%3E")}.snowflake__inner_type_3:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232.815%22%20height%3D%2232.815%22%3E%3Cpath%20d%3D%22M4.581%2023.55h4.681v4.681a.78.78%200%201%201-1.562%200v-3.118H4.581a.781.781%200%200%201%200-1.563zM29.016%208.481a.781.781%200%200%200-.781-.781h-3.119V4.582a.781.781%200%200%200-1.562%200v4.681h4.682c.429%200%20.78-.35.78-.782zm-24.252.598l4.683-.001V4.395a.781.781%200%200%200-1.562%200v3.121l-3.121.001a.781.781%200%200%200%200%201.562zm23.655%2014.287h-4.685l.002%204.684a.78.78%200%201%200%201.562%200l-.002-3.121h3.122a.781.781%200%200%200%20.001-1.563zm4.394-6.96a.78.78%200%200%201-.781.781h-3.426l1.876%201.875a.782.782%200%200%201-1.104%201.105l-2.979-2.979h-1.986L17.19%2024.41v1.987l2.977%202.979a.781.781%200%200%201-1.103%201.106l-1.874-1.875v3.426a.78.78%200%201%201-1.562%200v-3.426l-1.875%201.875a.782.782%200%200%201-1.105-1.105l2.978-2.979V24.41l-7.219-7.22H6.418l-2.98%202.98a.777.777%200%200%201-1.103%200%20.781.781%200%200%201%200-1.106L4.21%2017.19H.783a.78.78%200%201%201%200-1.562h3.426l-1.876-1.875a.782.782%200%201%201%201.106-1.105l2.979%202.979h1.989l7.219-7.218v-1.99L12.648%203.44a.782.782%200%201%201%201.106-1.105l1.874%201.874V.781a.782.782%200%200%201%201.563%200v3.426l1.875-1.875a.783.783%200%200%201%201.106%201.105l-2.979%202.979v1.99l7.216%207.218h1.992l2.979-2.979a.782.782%200%200%201%201.105%201.105l-1.876%201.874h3.427a.781.781%200%200%201%20.777.782zm-10.613.782l.778-.78-.781-.782-5.009-5.008-.781-.781-.781.781-5.01%205.008-.781.781.781.781%205.01%205.011.782.781.78-.779%205.012-5.013zm5.863%204.646a.782.782%200%200%200-.781-.781h-6.229v6.228a.78.78%200%201%200%201.562%200v-4.665h4.666a.782.782%200%200%200%20.782-.782zm-.001-10.855a.782.782%200%200%200-.781-.781h-4.664V5.532a.782.782%200%200%200-1.562%200v6.228h6.227a.78.78%200%200%200%20.78-.781zm-23.318%200c0%20.432.35.781.781.781h6.228V5.532a.781.781%200%200%200-1.562%200v4.666H5.525a.781.781%200%200%200-.781.781zm.002%2010.855c0%20.432.35.781.781.781h4.664v4.665a.78.78%200%201%200%201.562%200v-6.228H5.527a.783.783%200%200%200-.781.782z%22%20fill%3D%22%7Bcolor%7D%22%2F%3E%3C%2Fsvg%3E")}.snowflake__inner_type_4:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2237.794%22%20height%3D%2237.794%22%3E%3Cpath%20d%3D%22M30.638%2017.313l-.914%201.584.915%201.585a.78.78%200%201%201-1.352.78l-1.366-2.366%201.366-2.365a.782.782%200%200%201%201.067-.286c.372.215.5.692.284%201.068zM11.65%2011.08l2.733.002%201.367-2.367a.78.78%200%200%200-1.352-.781l-.915%201.585-1.831-.002h-.001a.78.78%200%200%200-.001%201.563zm14.491%2015.633h-2.733l-1.365%202.365a.78.78%200%201%200%201.352.78l.914-1.584h1.831a.781.781%200%200%200%20.001-1.561zm-4.1-17.998l1.367%202.367h2.733a.78.78%200%201%200%200-1.562h-1.833l-.915-1.585a.78.78%200%200%200-1.352.78zM15.75%2029.08l-1.368-2.366h-2.733a.781.781%200%200%200%200%201.562h1.832l.917%201.585c.146.25.409.391.677.391a.779.779%200%200%200%20.675-1.172zm-8.313-7.531a.78.78%200%200%200%201.067-.284L9.87%2018.9l-1.367-2.368a.781.781%200%200%200-1.351.781l.916%201.587-.914%201.584a.776.776%200%200%200%20.283%201.065zm27.827%206.798a.784.784%200%200%201-1.067.285l-.89-.515-2.096%201.209a.793.793%200%200%201-.391.105.762.762%200%200%201-.391-.105l-2.484-1.435a.78.78%200%200%201-.391-.676l-.002-2.417-2.408-1.392a7.714%207.714%200%200%201-5.467%203.168v2.773l2.093%201.208a.78.78%200%200%201%20.391.676l.001%202.868c0%20.28-.149.537-.392.676l-2.093%201.205v1.032a.781.781%200%200%201-1.562%200V35.98l-2.095-1.207a.78.78%200%200%201-.391-.676l.001-2.868c0-.28.15-.537.391-.676l2.094-1.206v-2.773a7.718%207.718%200%200%201-5.468-3.168l-2.408%201.392.002%202.415c0%20.281-.15.539-.391.676l-2.487%201.437a.785.785%200%200%201-.782%200l-2.095-1.209-.893.518a.782.782%200%200%201-.782-1.354l.893-.517.001-2.414a.78.78%200%200%201%20.391-.677l2.487-1.434a.774.774%200%200%201%20.781%200l2.093%201.208%202.407-1.39a7.655%207.655%200%200%201%200-6.317l-2.406-1.39-2.096%201.209a.772.772%200%200%201-.782%200l-2.485-1.434a.786.786%200%200%201-.391-.676l.002-2.416-.894-.517a.78.78%200%200%201-.285-1.066.788.788%200%200%201%201.07-.283l.893.514%202.093-1.208a.774.774%200%200%201%20.781%200L9.851%209.91c.24.14.391.398.391.675L10.24%2013l2.408%201.392a7.712%207.712%200%200%201%205.468-3.167V8.45L16.02%207.242a.78.78%200%200%201-.391-.676l.002-2.87c0-.279.15-.538.391-.675l2.094-1.208V.781a.781.781%200%200%201%201.562%200v1.032l2.093%201.206a.785.785%200%200%201%20.391.677l-.002%202.87c0%20.28-.149.536-.391.674l-2.091%201.208v2.772a7.708%207.708%200%200%201%205.467%203.167l2.409-1.392-.002-2.416c0-.28.149-.539.391-.676l2.487-1.436c.24-.14.539-.14.781%200l2.095%201.208.894-.514a.78.78%200%201%201%20.781%201.352l-.894.516v2.417c0%20.279-.15.538-.391.675l-2.487%201.436a.785.785%200%200%201-.782%200l-2.092-1.209-2.408%201.39c.436.967.684%202.032.684%203.158a7.65%207.65%200%200%201-.684%203.158l2.408%201.391%202.091-1.206a.782.782%200%200%201%20.78%200l2.488%201.432c.24.141.392.398.392.677l-.002%202.414.893.517a.783.783%200%200%201%20.287%201.068zm-6.147-16.251l.001.9.78.453.921.531%201.706-.982v-1.965l-.78-.451-.923-.533-1.707.983.002%201.064zm-20.443-.002l.002-1.063-1.706-.985-.922.535-.778.451-.001.902-.001%201.063%201.703.982.924-.533.779-.451v-.901zm0%2013.604l-.001-.899-.781-.451-.919-.533-1.706.982-.001%201.064v.901l.781.451.923.533%201.707-.982-.003-1.066zm15.109-3.076c.315-.413.586-.864.789-1.351a6.121%206.121%200%200%200%200-4.748%206.175%206.175%200%200%200-.789-1.35%206.158%206.158%200%200%200-4.106-2.375%206.48%206.48%200%200%200-.781-.056c-.266%200-.525.022-.781.056a6.149%206.149%200%200%200-4.106%202.375%206.128%206.128%200%200%200-.789%201.35%206.104%206.104%200%200%200-.479%202.374%206.1%206.1%200%200%200%201.268%203.725%206.15%206.15%200%200%200%204.106%202.374c.256.031.516.056.781.056s.525-.022.781-.056a6.142%206.142%200%200%200%204.106-2.374zM17.19%206.113l.924.531.781.452.781-.452.919-.531.002-1.968-.921-.531-.784-.452-.779.451-.922.532-.001%201.968zm3.408%2025.57l-.921-.532-.781-.452-.781.452-.922.532-.001%201.966.923.531.782.451.78-.449.922-.533-.001-1.966zm11.925-5.819l.001-1.063-1.707-.981-.919.529-.782.451v.901l.001%201.065%201.702.981.924-.533.778-.449.002-.901z%22%20fill%3D%22%7Bcolor%7D%22%2F%3E%3C%2Fsvg%3E")}.snowflake__inner_type_5:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.25%22%20height%3D%2231.25%22%3E%3Cpath%20d%3D%22M20.581%201.176l-3.914%203.915V0h1.041v2.576L19.845.439l.736.737zm-1.615%209.069l.351.217%206.623-6.625-.736-.737-6.048%206.051a7.141%207.141%200%200%200-1.449-.6v-.082l5.082-5.082-.737-.737-5.387%205.388v1.33l.402.093a6.213%206.213%200%200%201%201.899.784zm2.041%202.043c.368.585.63%201.224.786%201.893l.094.403h1.028l5.171-5.173-.736-.737-4.699%204.701a7.523%207.523%200%200%200-.549-1.28l6.048-6.05-.737-.735-6.622%206.625.216.353zm7.368%201.254l1.921-1.923-.736-.735-3.699%203.7h5.39v-1.042h-2.876zm1.185%206.826l.736-.736-1.923-1.923h2.877v-1.042h-5.389l3.699%203.701zm-6.915-2.498l4.705%204.707.736-.736-5.171-5.174h-1.03l-.096.4a6.24%206.24%200%200%201-.795%201.883l-.22.353%206.639%206.641.736-.736-6.061-6.062c.227-.414.414-.84.557-1.276zm-3.7%203.125a6.241%206.241%200%200%201-1.88.794l-.399.096v1.33l5.387%205.387.736-.736-5.082-5.082v-.089a7.322%207.322%200%200%200%201.434-.605l6.061%206.062.736-.736-6.641-6.641-.352.22zM16.667%2031.25h1.041v-2.576l2.137%202.137.736-.737-3.914-3.914v5.09zm-5.26-.439l2.134-2.137v2.576h1.042v-5.093l-3.913%203.916.737.738zm.897-9.816l-.352-.222-6.642%206.641.736.736%206.062-6.062c.456.254.937.456%201.433.605v.089l-5.08%205.082.736.736%205.387-5.387v-1.33l-.4-.096a6.175%206.175%200%200%201-1.88-.792zm-2.046-2.047a6.315%206.315%200%200%201-.798-1.883l-.096-.4H8.335l-5.172%205.174.737.736%204.706-4.71c.145.441.329.865.556%201.276L3.1%2025.202l.736.736%206.643-6.643-.221-.347zM0%2016.667v1.042h2.876L.954%2019.632l.736.736%203.698-3.701H0zm1.69-5.783l-.736.735%201.921%201.923H0v1.042h5.39l-3.7-3.7zm6.916%202.498L3.9%208.674l-.736.737%205.172%205.173h1.029l.096-.4a6.15%206.15%200%200%201%20.798-1.881l.222-.352L3.837%205.31l-.736.736%206.062%206.06a7.268%207.268%200%200%200-.557%201.276zm-.145-9.996l5.08%205.082v.088c-.497.15-.977.352-1.433.606L6.047%203.101l-.736.737%206.643%206.643.352-.222a6.223%206.223%200%200%201%201.88-.797l.4-.095v-1.33L9.2%202.649l-.739.737zm5.081-.81L11.408.439l-.736.737%203.913%203.917V0h-1.042v2.576zm-1.757%2014.831a4.2%204.2%200%200%200%202.06%202.058l.739.338v-3.136h-3.138l.339.74zm0-3.562l-.337.738h3.135v-3.136l-.739.338a4.223%204.223%200%200%200-2.059%202.06zm7.679%203.561l.338-.739h-3.135v3.136l.738-.338a4.204%204.204%200%200%200%202.059-2.059zm0-3.561a4.198%204.198%200%200%200-2.059-2.06l-.738-.34v3.138h3.135l-.338-.738z%22%20fill%3D%22%7Bcolor%7D%22%2F%3E%3C%2Fsvg%3E")}';
289
290var Snowflakes =
291/*#__PURE__*/
292function () {
293 /**
294 * @constructor
295 *
296 * @param {Object} params
297 *
298 * @param {DOMElem} [params.container=document.body]
299 * @param {number} [params.count=50]
300 * @param {number} [params.color="#5ECDEF"]
301 * @param {number} [params.minOpacity=0.6]
302 * @param {number} [params.maxOpacity=1]
303 * @param {number} [params.minSize=8]
304 * @param {number} [params.maxSize=18]
305 * @param {boolean} [params.rotation=true]
306 * @param {number} [params.speed=1]
307 * @param {boolean} [params.stop=false]
308 * @param {number} [params.types=6]
309 * @param {number} [params.width=width of container]
310 * @param {number} [params.height=height of container]
311 * @param {boolean} [params.wind=true]
312 * @param {number} [params.zIndex=9999]
313 */
314 function Snowflakes(params) {
315 var _this = this;
316
317 _classCallCheck(this, Snowflakes);
318
319 this.params = this._setParams(params);
320 this._flakes = [];
321 this._isBody = this.params.container === document.body;
322 var container = this._container = document.createElement('div');
323 container.classList.add('snowflakes');
324 this._isBody && container.classList.add('snowflakes_body');
325 setStyle(container, {
326 zIndex: this.params.zIndex
327 });
328 this.params.container.appendChild(container);
329
330 if (this.params.stop) {
331 this.stop();
332 }
333
334 if (!Snowflakes._mainStyleNode) {
335 Snowflakes._mainStyleNode = this._injectStyle(mainStyle);
336 Snowflakes._count = (Snowflakes._count || 0) + 1;
337 }
338
339 this._winHeight = this._getWindowHeight();
340
341 this._onResize = function () {
342 _this._winHeight = _this._getWindowHeight();
343
344 var height = _this._height();
345
346 hideElement(container);
347
348 _this._flakes.forEach(function (flake) {
349 return flake.resize(height, _this.params);
350 });
351
352 _this._updateAnimationStyle();
353
354 showElement(container);
355 };
356
357 if (imagesStyle) {
358 this._imagesStyleNode = this._injectStyle(imagesStyle.replace(/%7Bcolor%7D/g, encodeURIComponent(this.params.color)));
359 }
360
361 this._animationStyleNode = this._injectStyle(this._getAnimationStyle());
362 window.addEventListener('resize', this._onResize, false);
363
364 for (var i = 0; i < this.params.count; i++) {
365 this._flakes.push(new Flake(container, this._height(), this.params));
366 }
367 }
368 /**
369 * Destroy flakes.
370 */
371
372
373 _createClass(Snowflakes, [{
374 key: "destroy",
375 value: function destroy() {
376 this._removeStyle();
377
378 this._container && this._container.parentNode.removeChild(this._container);
379 delete this._container;
380 window.removeEventListener('resize', this._onResize, false);
381
382 this._flakes.forEach(function (flake) {
383 return flake.destroy();
384 });
385
386 delete this._flakes;
387 delete this.params;
388 }
389 /**
390 * Start CSS animation.
391 */
392
393 }, {
394 key: "start",
395 value: function start() {
396 this._container.classList.remove('snowflakes_paused');
397 }
398 /**
399 * Stop CSS animation.
400 */
401
402 }, {
403 key: "stop",
404 value: function stop() {
405 this._container.classList.add('snowflakes_paused');
406 }
407 }, {
408 key: "_setParams",
409 value: function _setParams(params) {
410 params = params || {};
411 var result = {};
412 [['color', '#5ECDEF'], ['container', document.body], ['count', 50], ['speed', 1], ['stop', false], ['rotation', true], ['minOpacity', 0.6], ['maxOpacity', 1], ['minSize', 8], ['maxSize', 18], ['types', 6], ['width'], ['height'], ['wind', true], ['zIndex', 9999]].forEach(function (item) {
413 var _item = _slicedToArray(item, 2),
414 name = _item[0],
415 defaultValue = _item[1];
416
417 if (typeof defaultValue === 'boolean') {
418 result[name] = name in params ? params[name] : defaultValue;
419 } else {
420 result[name] = params[name] || defaultValue;
421 }
422 });
423 return result;
424 }
425 }, {
426 key: "_getAnimationStyle",
427 value: function _getAnimationStyle() {
428 var height = this._height() + this.params.maxSize + 'px';
429 var css = "@-webkit-keyframes snowflake_y{from{-webkit-transform:translateY(0px)}to{-webkit-transform:translateY(".concat(height, ");}}\n@keyframes snowflake_y{from{transform:translateY(0px)}to{transform:translateY(").concat(height, ")}}");
430
431 for (var i = 0; i <= Flake.maxInnerSize; i++) {
432 var left = (Flake.calcSize(i, this.params) - this.params.minSize) * 4 + 'px';
433 css += "@-webkit-keyframes snowflake_x_".concat(i, "{from{-webkit-transform:translateX(0px)}to{-webkit-transform:translateX(").concat(left, ");}}\n@keyframes snowflake_x_").concat(i, "{from{transform:translateX(0px)}to{transform:translateX(").concat(left, ")}}");
434 }
435
436 return css;
437 }
438 }, {
439 key: "_updateAnimationStyle",
440 value: function _updateAnimationStyle() {
441 this._injectStyle(this._getAnimationStyle(), this._animationStyleNode);
442 }
443 }, {
444 key: "_injectStyle",
445 value: function _injectStyle(style, styleNode) {
446 if (!styleNode) {
447 styleNode = document.createElement('style');
448 document.body.appendChild(styleNode);
449 }
450
451 if (styleNode.styleSheet) {
452 // IE
453 styleNode.styleSheet.cssText = style;
454 } else if ('textContent' in styleNode) {
455 styleNode.textContent = style;
456 } else {
457 styleNode.innerHTML = style;
458 }
459
460 return styleNode;
461 }
462 }, {
463 key: "_removeStyle",
464 value: function _removeStyle() {
465 Snowflakes._count--;
466
467 if (Snowflakes._count <= 0) {
468 Snowflakes._count = 0;
469
470 if (Snowflakes._mainStyleNode) {
471 Snowflakes._mainStyleNode.parentNode.removeChild(Snowflakes._mainStyleNode);
472
473 delete Snowflakes._mainStyleNode;
474 }
475 }
476
477 if (this._animationStyleNode) {
478 this._animationStyleNode.parentNode.removeChild(this._animationStyleNode);
479
480 delete this._animationStyleNode;
481 }
482
483 if (this._imagesStyleNode) {
484 this._imagesStyleNode.parentNode.removeChild(this._imagesStyleNode);
485
486 delete this._imagesStyleNode;
487 }
488 }
489 }, {
490 key: "_height",
491 value: function _height() {
492 return this.params.height || (this._isBody ? this._winHeight : this.params.container.offsetHeight + this.params.maxSize);
493 }
494 }, {
495 key: "_getWindowHeight",
496 value: function _getWindowHeight() {
497 var body = document.body,
498 docElement = document.documentElement;
499 var height;
500
501 if (window.innerHeight) {
502 height = window.innerHeight;
503 } else if (docElement && docElement.clientHeight) {
504 height = docElement.clientHeight;
505 } else if (body) {
506 height = body.clientHeight;
507 }
508
509 return height;
510 }
511 }]);
512
513 return Snowflakes;
514}();
515
516function snowflakes (params) {
517 return new Snowflakes(params);
518}
519
520return snowflakes;
521
522})));