Skip to content

Commit

Permalink
🌀
Browse files Browse the repository at this point in the history
  • Loading branch information
@hcodes
hcodes committed Oct 26, 2024
1 parent 0cdd7c8 commit 3abb394
Show file tree
Hide file tree
Showing 11 changed files with 248 additions and 297 deletions.
2 changes: 2 additions & 0 deletions dist/defaultParams.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import { SnowflakesInnerParams } from './types';
export declare const defaultParams: SnowflakesInnerParams;
3 changes: 1 addition & 2 deletions dist/flake.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,9 @@ export declare class Flake {
private elem?;
private elemInner?;
constructor(params: FlakeParams);
private handleAnimationEnd;
private getLeft;
private updateLeft;
private update;
private reflow;
/**
* Resize a flake.
*/
Expand Down
6 changes: 3 additions & 3 deletions dist/helpers/dom.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ export declare function isBody(node: HTMLElement): boolean;
/**
* Add className for a node.
*/
export declare function addClass(node: HTMLElement, className: string): void;
export declare function addClass(node: HTMLElement, ...classNames: (string | boolean | null | undefined)[]): void;
/**
* Remove className for a node.
*/
export declare function removeClass(node: HTMLElement, className: string): void;
export declare const isAnimationEndSupported: boolean;
export declare function removeClass(node: HTMLElement, ...classNames: (string | boolean | null | undefined)[]): void;
export declare function reflow(node: HTMLElement): void;
29 changes: 6 additions & 23 deletions dist/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,20 @@
type SnowflakesRawParams = Partial<SnowflakesParams>;
export interface SnowflakesParams extends Record<string, boolean | HTMLElement | number | string | undefined> {
container: HTMLElement;
count: number;
color: string;
minOpacity: number;
maxOpacity: number;
minSize: number;
maxSize: number;
rotation: boolean;
speed: number;
stop: boolean;
types: number;
width?: number;
height?: number;
wind: boolean;
zIndex: number;
autoResize: boolean;
}
import { SnowflakesParams } from './types';
export { SnowflakesParams } from './types';
export default class Snowflakes {
private container;
private destroyed;
private flakes;
private isBody;
private gid;
private params;
private animationStyleNode?;
private imagesStyleNode?;
private mainStyleNode?;
private containerSize;
static instanceCounter: number;
private gid;
static gid: number;
constructor(params?: SnowflakesRawParams);
static instanceCounter: number;
static hasSupport(): boolean;
constructor(params?: SnowflakesParams);
/**
* Start CSS animation.
*/
Expand Down Expand Up @@ -69,4 +53,3 @@ export default class Snowflakes {
private width;
private height;
}
export {};
2 changes: 1 addition & 1 deletion dist/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

153 changes: 63 additions & 90 deletions dist/snowflakes.esm.js
View file

Large diffs are not rendered by default.

161 changes: 73 additions & 88 deletions dist/snowflakes.js
View file

Large diffs are not rendered by default.

161 changes: 73 additions & 88 deletions dist/snowflakes.light.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,33 @@
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Snowflakes = factory());
})(this, (function () { 'use strict';

var animationPrefix = '';
if (typeof window !== 'undefined') {
animationPrefix = (Array.prototype.slice
.call(window.getComputedStyle(document.documentElement, ''))
.join(',')
.search(/,animation/) > -1) ? '' : 'webkit';
}
var defaultParams = {
color: '#5ECDEF',
container: document.body,
count: 50,
speed: 1,
stop: false,
rotation: true,
minOpacity: 0.6,
maxOpacity: 1,
minSize: 10,
maxSize: 25,
types: 6,
width: undefined,
height: undefined,
wind: true,
zIndex: 9999,
autoResize: true,
};

/**
* Set inline style.
*/
function setStyle(dom, props) {
Object.keys(props).forEach(function (originalKey) {
var key = originalKey;
if (animationPrefix && originalKey.search('animation') > -1) {
key = animationPrefix + originalKey[0].toUpperCase() + originalKey.substr(1);
}
Object.keys(props).forEach(function (key) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
dom.style[key] = props[originalKey];
dom.style[key] = props[key];
});
}
/**
Expand Down Expand Up @@ -80,7 +88,7 @@
function injectStyle(style, styleNode) {
if (!styleNode) {
styleNode = document.createElement('style');
document.body.appendChild(styleNode);
document.head.appendChild(styleNode);
}
styleNode.textContent = style;
return styleNode;
Expand All @@ -99,19 +107,42 @@
function isBody(node) {
return node === document.body;
}
function isNotEmptyString(value) {
return typeof value === 'string' && value !== '';
}
/**
* Add className for a node.
*/
function addClass(node, className) {
node.classList.add(className);
function addClass(node) {
var _a;
var classNames = [];
for (var _i = 1; _i < arguments.length; _i++) {
classNames[_i - 1] = arguments[_i];
}
var buffer = classNames.filter(isNotEmptyString);
if (buffer.length) {
(_a = node.classList).add.apply(_a, buffer);
}
}
/**
* Remove className for a node.
*/
function removeClass(node, className) {
node.classList.remove(className);
function removeClass(node) {
var _a;
var classNames = [];
for (var _i = 1; _i < arguments.length; _i++) {
classNames[_i - 1] = arguments[_i];
}
var buffer = classNames.filter(isNotEmptyString);
if (buffer.length) {
(_a = node.classList).remove.apply(_a, buffer);
}
}
function reflow(node) {
hideElement(node);
void node.offsetHeight;
showElement(node);
}
var isAnimationEndSupported = typeof document !== 'undefined' && 'onanimationend' in document;

/**
* Get random number.
Expand All @@ -138,47 +169,28 @@
var _this = this;
this.size = 0;
this.sizeInner = 0;
this.handleAnimationEnd = function (e) {
var elem = _this.elem;
if (!elem) {
return;
}
if (e.target !== elem) {
return;
}
setStyle(elem, { left: _this.getLeft() });
reflow(elem);
};
var flake = this.elem = document.createElement('div');
var innerFlake = this.elemInner = document.createElement('div');
this.update(params);
addClass(flake, 'snowflake');
addClass(innerFlake, 'snowflake__inner');
addClass(flake, 'snowflake_animation');
if (isAnimationEndSupported) {
addClass(flake, 'snowflake_animation-end');
flake.onanimationend = function (e) {
if (e.target !== flake) {
return;
}
_this.updateLeft();
_this.reflow();
};
}
else {
addClass(flake, 'snowflake_animation-infinity');
}
if (params.types) {
addClass(innerFlake, 'snowflake__inner_type_' + getRandom(0, params.types));
}
if (params.wind) {
addClass(innerFlake, 'snowflake__inner_wind');
}
if (params.rotation) {
addClass(innerFlake, 'snowflake__inner_rotation' + (Math.random() > 0.5 ? '' : '_reverse'));
}
addClass(innerFlake, 'snowflake__inner', params.types ? 'snowflake__inner_type_' + getRandom(0, params.types) : '', params.wind ? 'snowflake__inner_wind' : '', params.rotation ? ('snowflake__inner_rotation' + (Math.random() > 0.5 ? '' : '_reverse')) : '');
flake.appendChild(innerFlake);
flake.onanimationend = this.handleAnimationEnd;
}
Flake.prototype.getLeft = function () {
return (Math.random() * 99) + '%';
};
Flake.prototype.updateLeft = function () {
if (!this.elem) {
return;
}
setStyle(this.elem, {
left: this.getLeft(),
});
};
Flake.prototype.update = function (params) {
if (!this.elem || !this.elemInner) {
return;
Expand Down Expand Up @@ -206,14 +218,6 @@
animationDelay: (Math.random() * 4) + 's'
});
};
Flake.prototype.reflow = function () {
if (!this.elem) {
return;
}
hideElement(this.elem);
void this.elem.offsetHeight;
showElement(this.elem);
};
/**
* Resize a flake.
*/
Expand Down Expand Up @@ -260,7 +264,7 @@
return Flake;
}());

var mainStyle = '.snowflake{pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:transform}.snowflake_animation{-webkit-animation:snowflake_unknown 10s linear;animation:snowflake_unknown 10s linear}.snowflake_animation-infinity{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.snowflake__inner,.snowflake__inner:before{bottom:0;left:0;position:absolute;right:0;top:0}.snowflake__inner:before{background-size:100% 100%;content:""}.snowflake__inner_wind{-webkit-animation:snowflake_unknown 2s ease-in-out infinite alternate;animation:snowflake_unknown 2s ease-in-out infinite alternate}.snowflake__inner_rotation:before{-webkit-animation:snowflake_rotation 10s linear infinite;animation:snowflake_rotation 10s linear infinite}.snowflake__inner_rotation_reverse:before{-webkit-animation:snowflake_rotation_reverse 10s linear infinite;animation:snowflake_rotation_reverse 10s linear infinite}@-webkit-keyframes snowflake_rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes snowflake_rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes snowflake_rotation_reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes snowflake_rotation_reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}.snowflakes{pointer-events:none}.snowflakes_paused .snowflake,.snowflakes_paused .snowflake__inner,.snowflakes_paused .snowflake__inner:before{-webkit-animation-play-state:paused;animation-play-state:paused}.snowflakes_hidden{visibility:hidden}.snowflakes_body{height:1px;left:0;position:fixed;top:0;width:100%}';
var mainStyle = '.snowflake{animation:snowflake_unknown 10s linear;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.snowflake__inner,.snowflake__inner:before{bottom:0;left:0;position:absolute;right:0;top:0}.snowflake__inner:before{background-size:100% 100%;content:""}.snowflake__inner_wind{animation:snowflake_unknown 2s ease-in-out infinite alternate}.snowflake__inner_rotation:before{animation:snowflake_rotation 10s linear infinite}.snowflake__inner_rotation_reverse:before{animation:snowflake_rotation_reverse 10s linear infinite}@keyframes snowflake_rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes snowflake_rotation_reverse{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}.snowflakes{pointer-events:none}.snowflakes_paused .snowflake,.snowflakes_paused .snowflake__inner,.snowflakes_paused .snowflake__inner:before{animation-play-state:paused}.snowflakes_hidden{visibility:hidden}.snowflakes_body{height:1px;left:0;position:fixed;top:0;width:100%}';
var imagesStyle = '';
var Snowflakes = /** @class */ (function () {
function Snowflakes(params) {
Expand Down Expand Up @@ -295,6 +299,9 @@
screen.orientation.addEventListener('change', this.handleOrientationChange);
}
}
Snowflakes.hasSupport = function () {
return Boolean(document.documentElement.classList);
};
/**
* Start CSS animation.
*/
Expand Down Expand Up @@ -361,11 +368,7 @@
};
Snowflakes.prototype.appendContainer = function () {
var container = document.createElement('div');
addClass(container, 'snowflakes');
addClass(container, "snowflakes_gid_".concat(this.gid));
if (this.isBody) {
addClass(container, 'snowflakes_body');
}
addClass(container, 'snowflakes', "snowflakes_gid_".concat(this.gid), this.isBody ? 'snowflakes_body' : '');
setStyle(container, { zIndex: String(this.params.zIndex) });
this.params.container.appendChild(container);
return container;
Expand Down Expand Up @@ -414,24 +417,6 @@
Snowflakes.prototype.setParams = function (rawParams) {
var params = rawParams || {};
var result = {};
var defaultParams = {
color: '#5ECDEF',
container: document.body,
count: 50,
speed: 1,
stop: false,
rotation: true,
minOpacity: 0.6,
maxOpacity: 1,
minSize: 10,
maxSize: 25,
types: 6,
width: undefined,
height: undefined,
wind: true,
zIndex: 9999,
autoResize: true,
};
Object.keys(defaultParams).forEach(function (name) {
result[name] = typeof params[name] === 'undefined' ?
defaultParams[name] :
Expand All @@ -441,15 +426,15 @@
};
Snowflakes.prototype.getAnimationStyle = function () {
var fromY = '0px';
var maxSize = this.params.maxSize * Math.sqrt(2);
var maxSize = Math.ceil(this.params.maxSize * Math.sqrt(2));
var toY = this.isBody ? "calc(100vh + ".concat(maxSize, "px)") : "".concat(this.height() + maxSize, "px");
var gid = this.gid;
var css = "@-webkit-keyframes snowflake_gid_".concat(gid, "_y{from{-webkit-transform:translateY(").concat(fromY, ")}to{-webkit-transform:translateY(").concat(toY, ");}}\n@keyframes snowflake_gid_").concat(gid, "_y{from{transform:translateY(").concat(fromY, ")}to{transform:translateY(").concat(toY, ");}}");
var cssText = ["@keyframes snowflake_gid_".concat(gid, "_y{from{transform:translateY(").concat(fromY, ")}to{transform:translateY(").concat(toY, ")}}")];
for (var i = 0; i <= maxInnerSize; i++) {
var left = calcSize(i, this.params.minSize, this.params.maxSize) + 'px';
css += "@-webkit-keyframes snowflake_gid_".concat(gid, "_x_").concat(i, "{from{-webkit-transform:translateX(0px)}to{-webkit-transform:translateX(").concat(left, ");}}\n@keyframes snowflake_gid_").concat(gid, "_x_").concat(i, "{from{transform:translateX(0px)}to{transform:translateX(").concat(left, ")}}");
cssText.push("@keyframes snowflake_gid_".concat(gid, "_x_").concat(i, "{from{transform:translateX(0px)}to{transform:translateX(").concat(left, ")}}"));
}
return css;
return cssText.join('\n');
};
Snowflakes.prototype.updateAnimationStyle = function () {
this.injectStyle(this.getAnimationStyle(), this.animationStyleNode);
Expand All @@ -472,8 +457,8 @@
return this.params.height ||
(this.isBody ? getWindowHeight() : this.params.container.offsetHeight + this.params.maxSize);
};
Snowflakes.instanceCounter = 0;
Snowflakes.gid = 0;
Snowflakes.instanceCounter = 0;
return Snowflakes;
}());

Expand Down
Loading

0 comments on commit 3abb394

Please sign in to comment.