Skip to content

Commit

Permalink
Merge pull request #69 from hcodes/fix_resize
Browse files Browse the repository at this point in the history 
Improve positioning of snowflakes when resizing the window.
  • Loading branch information
@hcodes
hcodes committed Dec 16, 2023
2 parents 237f82f + e9464ee commit cfd331e
Show file tree
Hide file tree
Showing 12 changed files with 515 additions and 398 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
## v6.3.0
+ Improved positioning of snowflakes when resizing the window.

## v6.2.1
+ Fix for server rendering.

Expand Down
2 changes: 2 additions & 0 deletions dist/flake.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export declare class Flake {
private elem?;
private elemInner?;
constructor(params: FlakeParams);
private getLeft;
private updateLeft;
private update;
private reflow;
/**
Expand Down
46 changes: 33 additions & 13 deletions dist/snowflakes.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ class Flake {
if (e.target !== flake) {
return;
}
this.update(params);
this.updateLeft();
this.reflow();
};
}
Expand All @@ -161,6 +161,17 @@ class Flake {
}
flake.appendChild(innerFlake);
}
getLeft() {
return (Math.random() * 99) + '%';
}
updateLeft() {
if (!this.elem) {
return;
}
setStyle(this.elem, {
left: this.getLeft(),
});
}
update(params) {
if (!this.elem || !this.elemInner) {
return;
Expand All @@ -173,7 +184,7 @@ class Flake {
animationName: `snowflake_gid_${params.gid}_y`,
animationDelay: animationProps.animationDelay,
animationDuration: animationProps.animationDuration,
left: (Math.random() * 99) + '%',
left: this.getLeft(),
top: -Math.sqrt(2) * this.size + 'px',
width: this.size + 'px',
height: this.size + 'px'
Expand All @@ -200,26 +211,31 @@ class Flake {
* Resize a flake.
*/
resize(params) {
const props = this.getAnimationProps(params);
if (this.elem) {
setStyle(this.elem, props);
if (!this.elem) {
return;
}
const props = this.getAnimationProps(params);
setStyle(this.elem, {
animationDuration: props.animationDuration,
});
}
/**
* Append flake to container.
*/
appendTo(container) {
if (this.elem) {
container.appendChild(this.elem);
if (!this.elem) {
return;
}
container.appendChild(this.elem);
}
/**
* Destroy a flake.
*/
destroy() {
if (this.elem) {
this.elem.onanimationend = null;
if (!this.elem) {
return;
}
this.elem.onanimationend = null;
delete this.elem;
delete this.elemInner;
}
Expand Down Expand Up @@ -300,14 +316,17 @@ class Snowflakes {
resize() {
const newWidth = this.width();
const newHeight = this.height();
if (this.containerSize.width === newWidth && this.containerSize.height === newHeight) {
if (newHeight === this.containerSize.height) {
return;
}
this.containerSize.width = newWidth;
this.containerSize.height = newHeight;
const flakeParams = this.getFlakeParams();
hideElement(this.container);
this.flakes.forEach(flake => flake.resize(flakeParams));
if (this.isBody) {
return;
}
hideElement(this.container);
this.updateAnimationStyle();
showElement(this.container);
}
Expand Down Expand Up @@ -410,10 +429,11 @@ class Snowflakes {
}
getAnimationStyle() {
const fromY = '0px';
const toY = (this.height() + this.params.maxSize * Math.sqrt(2)) + 'px';
const maxSize = this.params.maxSize * Math.sqrt(2);
const toY = this.isBody ? `calc(100vh + ${maxSize}px)` : `${this.height() + maxSize}px`;
const gid = this.gid;
let css = `@-webkit-keyframes snowflake_gid_${gid}_y{from{-webkit-transform:translateY(${fromY})}to{-webkit-transform:translateY(${toY});}}
@keyframes snowflake_gid_${gid}_y{from{transform:translateY(${fromY})}to{transform:translateY(${toY})}}`;
@keyframes snowflake_gid_${gid}_y{from{transform:translateY(${fromY})}to{transform:translateY(${toY});}}`;
for (let i = 0; i <= maxInnerSize; i++) {
const left = calcSize(i, this.params.minSize, this.params.maxSize) + 'px';
css += `@-webkit-keyframes snowflake_gid_${gid}_x_${i}{from{-webkit-transform:translateX(0px)}to{-webkit-transform:translateX(${left});}}
Expand Down
46 changes: 33 additions & 13 deletions dist/snowflakes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
if (e.target !== flake) {
return;
}
_this.update(params);
_this.updateLeft();
_this.reflow();
};
}
Expand All @@ -168,6 +168,17 @@
}
flake.appendChild(innerFlake);
}
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 All @@ -180,7 +191,7 @@
animationName: "snowflake_gid_".concat(params.gid, "_y"),
animationDelay: animationProps.animationDelay,
animationDuration: animationProps.animationDuration,
left: (Math.random() * 99) + '%',
left: this.getLeft(),
top: -Math.sqrt(2) * this.size + 'px',
width: this.size + 'px',
height: this.size + 'px'
Expand All @@ -207,26 +218,31 @@
* Resize a flake.
*/
Flake.prototype.resize = function (params) {
var props = this.getAnimationProps(params);
if (this.elem) {
setStyle(this.elem, props);
if (!this.elem) {
return;
}
var props = this.getAnimationProps(params);
setStyle(this.elem, {
animationDuration: props.animationDuration,
});
};
/**
* Append flake to container.
*/
Flake.prototype.appendTo = function (container) {
if (this.elem) {
container.appendChild(this.elem);
if (!this.elem) {
return;
}
container.appendChild(this.elem);
};
/**
* Destroy a flake.
*/
Flake.prototype.destroy = function () {
if (this.elem) {
this.elem.onanimationend = null;
if (!this.elem) {
return;
}
this.elem.onanimationend = null;
delete this.elem;
delete this.elemInner;
};
Expand Down Expand Up @@ -309,14 +325,17 @@
Snowflakes.prototype.resize = function () {
var newWidth = this.width();
var newHeight = this.height();
if (this.containerSize.width === newWidth && this.containerSize.height === newHeight) {
if (newHeight === this.containerSize.height) {
return;
}
this.containerSize.width = newWidth;
this.containerSize.height = newHeight;
var flakeParams = this.getFlakeParams();
hideElement(this.container);
this.flakes.forEach(function (flake) { return flake.resize(flakeParams); });
if (this.isBody) {
return;
}
hideElement(this.container);
this.updateAnimationStyle();
showElement(this.container);
};
Expand Down Expand Up @@ -420,9 +439,10 @@
};
Snowflakes.prototype.getAnimationStyle = function () {
var fromY = '0px';
var toY = (this.height() + this.params.maxSize * Math.sqrt(2)) + 'px';
var maxSize = 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 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, ");}}");
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, ")}}");
Expand Down
46 changes: 33 additions & 13 deletions dist/snowflakes.light.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
if (e.target !== flake) {
return;
}
_this.update(params);
_this.updateLeft();
_this.reflow();
};
}
Expand All @@ -168,6 +168,17 @@
}
flake.appendChild(innerFlake);
}
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 All @@ -180,7 +191,7 @@
animationName: "snowflake_gid_".concat(params.gid, "_y"),
animationDelay: animationProps.animationDelay,
animationDuration: animationProps.animationDuration,
left: (Math.random() * 99) + '%',
left: this.getLeft(),
top: -Math.sqrt(2) * this.size + 'px',
width: this.size + 'px',
height: this.size + 'px'
Expand All @@ -207,26 +218,31 @@
* Resize a flake.
*/
Flake.prototype.resize = function (params) {
var props = this.getAnimationProps(params);
if (this.elem) {
setStyle(this.elem, props);
if (!this.elem) {
return;
}
var props = this.getAnimationProps(params);
setStyle(this.elem, {
animationDuration: props.animationDuration,
});
};
/**
* Append flake to container.
*/
Flake.prototype.appendTo = function (container) {
if (this.elem) {
container.appendChild(this.elem);
if (!this.elem) {
return;
}
container.appendChild(this.elem);
};
/**
* Destroy a flake.
*/
Flake.prototype.destroy = function () {
if (this.elem) {
this.elem.onanimationend = null;
if (!this.elem) {
return;
}
this.elem.onanimationend = null;
delete this.elem;
delete this.elemInner;
};
Expand Down Expand Up @@ -309,14 +325,17 @@
Snowflakes.prototype.resize = function () {
var newWidth = this.width();
var newHeight = this.height();
if (this.containerSize.width === newWidth && this.containerSize.height === newHeight) {
if (newHeight === this.containerSize.height) {
return;
}
this.containerSize.width = newWidth;
this.containerSize.height = newHeight;
var flakeParams = this.getFlakeParams();
hideElement(this.container);
this.flakes.forEach(function (flake) { return flake.resize(flakeParams); });
if (this.isBody) {
return;
}
hideElement(this.container);
this.updateAnimationStyle();
showElement(this.container);
};
Expand Down Expand Up @@ -420,9 +439,10 @@
};
Snowflakes.prototype.getAnimationStyle = function () {
var fromY = '0px';
var toY = (this.height() + this.params.maxSize * Math.sqrt(2)) + 'px';
var maxSize = 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 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, ");}}");
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, ")}}");
Expand Down
Loading

0 comments on commit cfd331e

Please sign in to comment.